Sass и комбинированный дочерний селектор

126

Я только что открыл для себя Sass и был так взволнован.

На своем веб-сайте я реализовал древовидное меню навигации, оформленное с помощью дочернего комбинатора ( E > F).

Есть ли способ переписать этот код с помощью более простого (или лучшего) синтаксиса в Sass?

#foo > ul > li > ul > li > a {
  color: red;
}
frarees
источник
Я думаю, что "проще / лучше" OP означает "таким образом, чтобы использовать пробелы для обозначения иерархии"
jsejcksn

Ответы:

223

Без комбинированного дочернего селектора вы, вероятно, сделали бы что-то подобное:

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

Если вы хотите воспроизвести тот же синтаксис с >, вы можете сделать это:

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

Это компилируется в это:

foo > bar > baz {
  color: red;
}

Или в sass:

foo
  > bar
    > baz
      color: red
Арно Ле Блан
источник
2
Это просто продлит его жизнь, не так ли?
BoltClock
1
Я думаю, это то, чего хочет ОП,
Арно Ле Блан
1
хорошо, спасибо. кстати, как заявил BoltClock, длиннее (и как-то уродливее для меня). Похоже, мне придется остаться со своим старым стилем.
Frarees 08
1
вам нужно определить "более приятный синтаксис";)
Арно Ле Блан
19

Для этого единственного правила нет более короткого способа сделать это. Дочерний комбинатор одинаков в CSS и в Sass / SCSS, и ему нет альтернативы.

Однако, если у вас было несколько таких правил:

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

Вы можете сжать их до одного из следующих:

/* 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
источник
Значит, для комбинированного дочернего селектора нет преобразования ... может быть, есть какие-то альтернативы ему?
Frarees 08