Sass i łączony selektor dla dzieci

Question

Sass i łączony selektor dla dzieci

Właśnie odkryłem Sass, i byłem tak bardzo podekscytowany tym.

Nawiasem mówiąc, w mojej witrynie zaimplementowałem drzewiaste menu nawigacyjne, stylizowane na combined child selector (E > F).

Czy Jest jakiś sposób naprzepisanie tego kodu na prostszą (lub lepszą) składnię w Sass?

#foo > ul > li > ul > li > a {
  color: red;
}

96

css css-selectors sass

Author: BoltClock, 2011-09-08

Source

2 answers

Dla tej jedynej zasady, którą masz, nie ma krótszego sposobu, aby to zrobić. Kombinator potomny jest taki sam w CSS i w Sass/SCSS i nie ma dla niego alternatywy.

Jednakże, jeśli masz wiele takich zasad:

#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;
}

Można je skondensować do jednego z następujących:

/* 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; }
}

14

Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-08 09:29:06

score 185 · Accepted Answer

Bez łączonego selektora Potomków prawdopodobnie zrobiłbyś coś podobnego:

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

Jeśli chcesz odtworzyć tę samą składnię za pomocą >, możesz to zrobić:

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

To zestawia się z tym:

foo > bar > baz {
  color: red;
}

Lub w sass:

foo
  > bar
    > baz
      color: red