via Alex King, Sie können Variablen für Selektoren verwenden
$a-tags: 'a, a:active, a:hover, a:visited';
$a-tags-hover: 'a:active, a:hover';
#{$a-tags} {
color: red;
text-decoration: none;
}
#{$a-tags-hover} {
color: blue;
}
Sie können sogar so verschachteln, hier wird es noch nützlicher
.module {
#{$a-tags} {
color: blue;
text-decoration: none;
}
}
via Reggie Dawson, Sie könnten auch ein @mixin erstellen, um Dinge für Sie zu erstellen. Beachten Sie, dass diese Link-Pseudo-Stile generell ein großartiger Anwendungsfall für Verschachtelung sind.
@mixin linx ($link, $visit, $hover, $active) {
a {
color: $link;
&:visited {
color: $visit;
}
&:hover {
color: $hover;
}
&:active {
color: $active;
}
}
}
Das Compass-Add-on bietet ein Mixin
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
Verdammt gut, danke.
Es wird immer besser. Ich packe das sofort in mein Bootstrap-Sass-Skript
Coole Sachen!
Danke! Ich werde diese Technik verwenden, um Anker-Tags auf der WordPress-Website meines freiberuflichen Kunden zu stylen. Das scheint der einfachste Weg zu sein.
Für Interessierte, ich benutze das WP-SCSS WordPress-Plugin (https://wordpress.org/plugins/wp-scss/), um meine SCSS-Datei in CSS zu konvertieren, ohne das Ruby SASS Gem zu verwenden.
Ich benutze auch so etwas. Ich habe Standardwerte für jede Farbe hinzugefügt, da in den meisten Fällen die Farben gleich sein werden. Ich suche nach einer Möglichkeit, die text-decoration ein- oder auszuschalten, aber ich bin noch kein Sass-Experte! Ich wünschte, ich könnte einen Weg finden, damit es zwei Standardfarbauswahlen gibt, damit ich umschalten kann, ob es auf dunklem oder hellem Hintergrund ist.
Das geht!
https://robots.thoughtbot.com/controlling-color-with-sass-color-functions
Sie können eine neue Textfarbe über/unter einem Farbthreshold einstellen!
https://robots.thoughtbot.com/controlling-color-with-sass-color-functions
Es könnte notwendig sein, "a:link" hinzuzufügen.
Es sollte beachtet werden, dass die erste Lösung verschachtelt sein sollte. Wenn Sie einen Selektor wie
.nav #{$a-tags}
verwenden würden, wäre der resultierende Selektor
.nav a, a:active, a:hover, a:visited {
}
Dies ist wahrscheinlich nicht das, was der Benutzer wünscht. Verschachteln des Selektors, wie unten
.nav{
#{$a-tags} {
}
}
ergibt das folgende CSS
.nav a, .nav a:active, .nav a:hover, .nav a:visited{
}
Personen, die SCSS sehr gut kennen, verstehen die Nuancen vielleicht, aber dies dient dem Vorteil neuer SCSS-Benutzer.