sass compound selector nicht am Anfang

[Matthias Apsel]

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

[Christian Kruse]

Hallo Matthias,

Also, gibt es einen Verbinder, der auch in der Mitte eines Selektors stehen darf?

Nein.

Aber benutz doch ein Mixin?

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse,

Aber benutz doch ein Mixin?

Hab ich mal gemacht. Aber da war doch was mit Kanonen und Spatzen?

Bis demnächst
Matthias

[Christian Kruse]

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

[Gunnar Bittersmann]

@@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 🖖

[Matthias Apsel]

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, 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].

Ja. Siehe oben.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@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 schon a[href].

Ja. Siehe oben.

?? a[href] hat dieselbe Spezifität wie a:link und a:visited.

LLAP 🖖

[Matthias Apsel]

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 wie a:link und a: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

[Gunnar Bittersmann]

@@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 🖖