Sass und kombinierter Kinderwähler

125

Ich habe gerade Sass entdeckt und war so aufgeregt darüber.

Auf meiner Website implementiere ich ein baumartiges Navigationsmenü, das mit dem untergeordneten Kombinator ( E > F) erstellt wurde.

Gibt es eine Möglichkeit, diesen Code mit einer einfacheren (oder besseren) Syntax in Sass neu zu schreiben ?

#foo > ul > li > ul > li > a {
  color: red;
}
Frarees
quelle
Ich denke mit "einfacher / besser" bedeutet OP "in einer Weise, die Leerzeichen verwendet, um Hierarchie anzuzeigen"
jsejcksn

Antworten:

222

Ohne die kombinierte Kinderauswahl würden Sie wahrscheinlich etwas Ähnliches tun:

foo {
  bar {
    baz {
      color: red;
    }
  }
}

Wenn Sie dieselbe Syntax mit reproduzieren möchten >, können Sie Folgendes tun:

foo {
  > bar {
    > baz {
      color: red;
    }
  }
}

Dies kompiliert dazu:

foo > bar > baz {
  color: red;
}

Oder in sass:

foo
  > bar
    > baz
      color: red
Arnaud Le Blanc
quelle
2
Das wird es nur länger machen, nicht wahr?
BoltClock
1
Ich denke, das ist es, was OP will
Arnaud Le Blanc
1
nett, danke. Übrigens ist, wie BoltClock sagte, länger (und irgendwie hässlicher für mich). Scheint, als müsste ich bei meinem alten Styling bleiben.
Frarees
1
Sie müssen "schönere Syntax" definieren;)
Arnaud Le Blanc
18

Für diese einzelne Regel gibt es keinen kürzeren Weg. Der untergeordnete Kombinator ist in CSS und in Sass / SCSS identisch, und es gibt keine Alternative dazu.

Wenn Sie jedoch mehrere Regeln wie diese hatten:

#foo > ul > li > ul > li > a:nth-child(3n+1) {
    color: red;
}

#foo > ul > li > ul > li > a:nth-child(3n+2) {
    color: green;
}

#foo > ul > li > ul > li > a:nth-child(3n+3) {
    color: blue;
}

Sie können sie zu einer der folgenden Optionen verdichten:

/* Sass */
#foo > ul > li > ul > li
    > a:nth-child(3n+1)
        color: red
    > a:nth-child(3n+2)
        color: green
    > a:nth-child(3n+3)
        color: blue

/* SCSS */
#foo > ul > li > ul > li {
    > a:nth-child(3n+1) { color: red; }
    > a:nth-child(3n+2) { color: green; }
    > a:nth-child(3n+3) { color: blue; }
}
BoltClock
quelle
Es gibt also keine Transformation für den kombinierten Kinderselektor ... vielleicht Alternativen dazu?
Frarees