Sass dan pemilih anak gabungan

126

Saya baru saja menemukan Sass, dan saya sangat bersemangat tentangnya.

Di situs web saya, saya menerapkan menu navigasi seperti pohon, yang ditata menggunakan kombinator anak ( E > F).

Apakah ada cara untuk menulis ulang kode ini dengan sintaks yang lebih sederhana (atau lebih baik) di Sass?

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

css css-selectors sass

— frarees
sumber

Saya pikir dengan "lebih sederhana / lebih baik" berarti OP "dengan cara yang menggunakan spasi putih untuk menunjukkan hierarki"

— jsejcksn

Jawaban:

223

Tanpa pemilih anak gabungan, Anda mungkin akan melakukan sesuatu yang serupa dengan ini:

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

Jika Anda ingin mereproduksi sintaks yang sama dengan >, Anda dapat melakukannya:

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

Ini mengkompilasi menjadi ini:

foo > bar > baz {
  color: red;
}

Atau di sass:

foo
  > bar
    > baz
      color: red

— Arnaud Le Blanc
sumber

Ini hanya akan membuatnya lebih lama, bukan?

— BoltClock

Saya pikir inilah yang diinginkan OP

— Arnaud Le Blanc

Terima kasih banyak. btw, seperti yang dikatakan BoltClock, lebih panjang (dan entah bagaimana lebih jelek bagi saya). Sepertinya saya harus tetap menggunakan gaya lama saya.

— frarees

Anda perlu mendefinisikan "sintaks yang lebih baik";)

— Arnaud Le Blanc

Untuk aturan tunggal yang Anda miliki, tidak ada cara yang lebih singkat untuk melakukannya. Kombinator anak sama di CSS dan di Sass / SCSS dan tidak ada alternatif lain untuk itu.

Namun, jika Anda memiliki beberapa aturan seperti ini:

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

Anda dapat meringkasnya menjadi salah satu dari berikut ini:

/* 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
sumber

Jadi tidak ada transformasi untuk pemilih anak gabungan ... mungkin ada alternatif lain untuk itu?

— frarees