sass compound selector nicht am Anfang
Matthias Apsel
- css
- sass
Hallo alle,
der compound selector (&
) darf leider nur am Anfang eines neuen Selektors stehen. Deshalb ist folgendes nicht möglich.
.classname {
/* */
a& {
/* */
&:link, &:visited {
/* */
}
&:focus, &:hover {
/* */
}
}
span& {
/* */
}
}
Lässt sich ähnliches geschickt umsetzen oder muss ich tatsächlich die entsprechenden Deklarationen doppeln?
a.classname, span.classname {
/* styles */
&:link, &:visited {
/* */
}
&:focus, &:hover {
/* */
}
}
Dieses ist zwar möglich, erzeugt aber CSS, was nicht sinnvoll ist (span.classname:link
) und wendet die :hover-Deklarationen auch auf das span-Element an, was ggf. nicht erwünscht ist.
Also, gibt es einen Verbinder, der auch in der Mitte eines Selektors stehen darf?
Bis demnächst
Matthias
Hallo Matthias,
Also, gibt es einen Verbinder, der auch in der Mitte eines Selektors stehen darf?
Nein.
Aber benutz doch ein Mixin?
LG,
CK
Hallo Matthias,
Hab ich mal gemacht.
👍
Aber da war doch was mit Kanonen und Spatzen?
Warum? Es gibt doch keinen Runtime-Overhead; im Gegenteil, das CSS wird simpler?
LG,
CK
@@Matthias Apsel
Lässt sich ähnliches geschickt umsetzen
.classname
{
&:matches(a)
{
}
&:matches(span)
{
}
}
Nur dass :matches
bislang nur als :-x-any
unterstützt wird, so dass dia Antwort auf
oder muss ich tatsächlich die entsprechenden Deklarationen doppeln?
noch ein Ja wäre:
.classname
{
&:-webkit-any(a)
{
}
&:-moz-any(a)
{
}
&:-webkit-any(span)
{
}
&:-moz-any(span)
{
}
}
Aber warum nicht einfach so?
.classname
{
}
a.classname
{
}
span.classsname
{
}
Und &:link, &:visited
macht auch keinen Sinn. Wenn du besuchte und unbesuchte Links gleichstylen willst, style a
. Und wenn es tatsächlich nur Links sein sollen und nicht alle a
-Elemente: irgendwann mal a:any-link
oder jetzt schon a[href]
.
LLAP 🖖
Hallo Gunnar Bittersmann,
Aber warum nicht einfach so?
.classname { } a.classname { } span.classsname { }
Weil das existierende CSS (dieses Forums) recht komplex ist und ich eine Veränderung der Spezifität von Selektoren vermeiden möchte, da ggf. Nebenwirkungen lange unerkannt bleiben.
Und
&:link, &:visited
macht auch keinen Sinn. Wenn du besuchte und unbesuchte Links gleichstylen willst, stylea
. Und wenn es tatsächlich nur Links sein sollen und nicht allea
-Elemente: irgendwann mala:any-link
oder jetzt schona[href]
.
Ja. Siehe oben.
Bis demnächst
Matthias
@@Matthias Apsel
Aber warum nicht einfach so?
Weil das existierende CSS (dieses Forums) recht komplex ist und ich eine Veränderung der Spezifität von Selektoren vermeiden möchte, da ggf. Nebenwirkungen lange unerkannt bleiben.
?? .classname {…} a.classname {…} span.classname {…}
ist doch genau das CSS, was du zu generieren gedenkst‽
Und
&:link, &:visited
macht auch keinen Sinn. […] jetzt schona[href]
.Ja. Siehe oben.
?? a[href]
hat dieselbe Spezifität wie a:link
und a:visited
.
LLAP 🖖
Hallo Gunnar Bittersmann,
Weil das existierende CSS (dieses Forums) recht komplex ist und ich eine Veränderung der Spezifität von Selektoren vermeiden möchte, da ggf. Nebenwirkungen lange unerkannt bleiben.
??
.classname {…} a.classname {…} span.classname {…}
ist doch genau das CSS, was du zu generieren gedenkst‽
Nein, da es a.classname
bisher schon gibt, wollte ich nicht auf .classname
„heruntergehen“. In einer neuen Seite wäre es genau das CSS, was ich zu generieren gedenke.
??
a[href]
hat dieselbe Spezifität wiea:link
unda:visited
.
Das stimmt. Es gibt sicher auch in diesem Forum die eine oder andere Stelle, an der man das CSS vereinfachen könnte. Das sollte man aber durch intensive Tests begleiten. Zudem sind an manchen Stellen :link
und :visited
tatsächlich unterschiedlich gestaltet.
Bis demnächst
Matthias
@@Matthias Apsel
~~~sass
Da hat der Syntax-Highlighter die geschweiften Klammern angemeckert. Zurecht, Sass-Syntax geht so:
selector
property: value
nested selector
property: value
Mit {
, ;
, }
ist’s SCSS-Syntax (“sassy CSS”).
Ich hab das stillschweigend zu ~~~scss
korrigiert; breche nun aber selbiges, um auf den Unterschied hinzuweisen.
LLAP 🖖