Matthias Apsel: sass compound selector nicht am Anfang

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

--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
  1. Hallo Matthias,

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

    Nein.

    Aber benutz doch ein Mixin?

    LG,
    CK

    1. 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

      --
      Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
      1. 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

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

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. 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

      --
      Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
      1. @@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 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
        1. 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

          --
          Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
  3. @@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 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)