Sass и комбинированный выбор ребенка - PullRequest
Новая
       9

Sass и комбинированный выбор ребенка

113 голосов
/ 08 сентября 2011

Я только что обнаружил Sass, и я был так взволнован этим.

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

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

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

Ответы [ 2 ]

207 голосов
/ 08 сентября 2011

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

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

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

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

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

foo > bar > baz {
  color: red;
}

Или в sass: 

foo
  > bar
    > baz
      color: red
16 голосов
/ 08 сентября 2011

Для этого единственного правила, которое у вас есть, нет более короткого способа сделать это.Дочерний комбинатор одинаков в 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; }
}
...