LESS - 同じスタイルの複数の異なるクラス？

あなたはこのスタイルをあまりレッスンしません。LESS - 同じスタイルの複数の異なるクラス？

nav a:hover, 
nav a:focus, 
footer a:hover, 
footer a:focus, 
.fullscreen-container a:hover, 
.fullscreen-container a:focus { 
    text-decoration: none; 
}

私の試み：

.text-decoration-none() { 
    text-decoration: none; 
} 

nav a { 
    &:focus, 
    &:focus { 
     .text-decoration-none(); 
    } 
} 

footer a { 
    &:focus, 
    &:focus { 
     .text-decoration-none(); 
    } 
} 

.fullscreen-container a { 
    &:focus, 
    &:focus { 
     .text-decoration-none(); 
    } 
}

結果：

nav a:focus, 
nav a:focus { 
    text-decoration: none; 
} 
footer a:focus, 
footer a:focus { 
    text-decoration: none; 
} 
.fullscreen-container a:focus, 
.fullscreen-container a:focus { 
    text-decoration: none; 
}

理想的な結果：

nav a:hover, 
nav a:focus, 
footer a:hover, 
footer a:focus, 
.fullscreen-container a:hover, 
.fullscreen-container a:focus { 
    text-decoration: none; 
}

任意のアイデア？

出典

2016-10-28 laukok

少ないが入れ子にできますという理由だけで物事をovercomplicateしないでください。あなたの期待されるCSS出力は実際にはLessでもこれを書くための最良の方法です。まだネストの方法を進めたい場合は、 'extend'を見てください。 – Harry

Extendは各セレクタを '.text-decoration-none'リファレンスにマージします。この場合、mixinを別のセレクタに切り替えるための使用はありません。 –

@BenSewards：私のコメントが私の拡張の提案に対する回答であったかどうかはわかりません。そのミックスイン全体を避けることができます。実際のセレクタの中に 'text-decoration'を記述し、それを拡張します。（また、私は個人的に、1つのプロパティだけを持つミックスインが嫌い、それは過度です。） – Harry

nav, footer, .fullscreen-container { 
    a { 
    &:hover, &:focus { 
     text-decoration: none; 
    } 
    } 
}

出典

2016-10-28 17:39:02

そうです、ミックスインを完全に避けてください。私ははるかに良いのが好き！ – Harry

私は[削除]していますが（http://less2css.org/#%7B%22less%22%3A%22nav%2C%20footer%2C%20.fullscreen-container%20%7B%5Cn%20 20％20％20％30％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％20％ '' {} 'のもの全体（それは絶対に何らかの' b 'で置き換えることは決して決してないでしょう）を使用しています（％20％20％7D％5Cn％7D％22％7D）。 –

.text-decoration-none() { 
    text-decoration: none; 
} 

nav a, footer a, .fullscreen-container a { 
    &:hover, 
    &:focus { 
     .text-decoration-none(); 
    } 
}

出典

2016-10-28 17:29:53

LESS - 同じスタイルの複数の異なるクラス？

答えて

関連する問題