LESS - mehrere verschiedene Klassen mit dem gleichen Stil?

Wie würdest du diesen Stil in LESS schreiben?LESS - mehrere verschiedene Klassen mit dem gleichen Stil?

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

Mein Versuch:

.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(); 
    } 
}

Ergebnis:

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; 
}

Ideal Ergebnis:

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

Irgendwelche Ideen?

Quelle

2016-10-28 laukok

Sie nicht Dinge verkomplizieren, nur weil weniger Verschachtelung erlaubt. Ihre erwartete CSS-Ausgabe ist tatsächlich die beste Möglichkeit, dies sogar mit Less zu schreiben. Wenn Sie weiterhin mit dem Nesting-Verfahren fortfahren möchten, werfen Sie einen Blick auf 'extend'. – Harry

Extend wird die einzelnen Selektoren in die Referenz ".text-decoration-none" einfügen. In diesem Fall ist es nicht sinnvoll, das Mixin auf einen anderen Wähler umzuschalten. –

@BenSewards: Ich weiß nicht, ob dieser Kommentar eine Antwort auf meinen Vorschlag von extend war. Sie können das Mixen im Allgemeinen vermeiden, die "Textdekoration" in einem der tatsächlichen Selektoren erwähnen und sie dann erweitern. (Ich hasse auch Mixins, die nichts als eine Eigenschaft haben, das ist ein Overkill.) – Harry

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

Quelle

2016-10-28 17:39:02

Ja, vermeide das Mixen total. Ich mag es viel besser! – Harry

Obwohl ich sogar auch [remove] (http://less2css.org/#%7B%22less%22%3A%22nav%2C%20footer%2C%20.fullscreen-container%20%7B%5Cn%20 % 20% 20% 20a% 3Ahöver% 2C% 20a% 3Afokus% 20% 7B% 5Cn% 20% 20% 20% 20% 20% 20% 20% 20Textdekoration% 3A% 20none% 3B% 5Cn% 20% 20 % 20% 20% 7D% 5Cn% 7D% 22% 7D) das ganze 'a {}' Ding (wie es offensichtlich ist, werden wir niemals darum gehen, es durch irgendein 'b' zu ersetzen). –

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

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

Quelle

2016-10-28 17:29:53

LESS - mehrere verschiedene Klassen mit dem gleichen Stil?

Antwort

Verwandte Themen