Sass i połączony selektor podrzędny


126

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

W mojej witrynie internetowej implementuję drzewiaste menu nawigacyjne, stylizowane za pomocą kombinatora potomnego ( E > F).

Czy istnieje sposób na przepisanie tego kodu z prostszą (lub lepszą) składnią w Sassie?

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

Myślę, że przez „prostszy / lepszy” OP oznacza „w sposób, który używa białych znaków do wskazania hierarchii”
jsejcksn

Odpowiedzi:


223

Bez połączonego selektora podrzędnego prawdopodobnie zrobiłbyś coś podobnego:

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

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

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

To kompiluje się do tego:

foo > bar > baz {
  color: red;
}

Lub sass:

foo
  > bar
    > baz
      color: red

2
To tylko ją wydłuży, prawda?
BoltClock

1
Myślałem, że tego właśnie chce OP
Arnaud Le Blanc,

1
fajnie dzięki. btw, jak stwierdził BoltClock, jest dłuższy (i jakoś brzydszy dla mnie). Wygląda na to, że będę musiał pozostać przy moim starym stylu.
frarees

1
musisz zdefiniować „ładniejszą składnię”;)
Arnaud Le Blanc,

19

W przypadku tej jednej reguły, którą masz, nie ma krótszego sposobu, aby to zrobić. Kombinator podrzędny jest taki sam w CSS, jak iw Sass / SCSS i nie ma dla niego alternatywy.

Jeśli jednak masz wiele takich reguł:

#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żesz je skondensować do jednego z poniższych:

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

Więc nie ma transformacji dla połączonego selektora dzieci ... może są jakieś alternatywy dla tego?
frarees
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.