Menstrukturkan pemilih kelas CSS dengan sass

mata utama

konvensyen penamaan CSS seperti BEM dan SMACSS sangat bergantung pada pemilih kelas CSS, dan menggunakan SASS boleh membuat penulisan pemilih ini lebih modular dan boleh diguna semula.
NEGARA PENYELESAIAN NATIVE DALAM SASS membolehkan penciptaan nama subclass dari nama blok asal pada tahap akar dokumen, memudahkan kod dan mengurangkan keperluan untuk pembantu tambahan seperti pembolehubah atau mixin.
BEM Mixin menyediakan API mesra yang mudah difahami apabila anda memahami bagaimana BEM berfungsi, walaupun logik tersembunyi di belakang Mixin, yang mungkin menghasilkan pemilih dan kelas baru yang kurang jelas.
Mixin Humanified-BEM direka untuk meningkatkan kebolehbacaan kod dengan menyembunyikan terminologi pengubah elemen blok, tetapi ini mungkin melibatkan terlalu banyak abstraksi bagi sesetengah pemaju.

Terdapat banyak konvensyen penamaan CSS. Anda mungkin sudah tahu tentang BEM dan SMACSS (yang terakhir adalah lebih daripada sekadar penamaan konvensyen). Dan OOCSS, yang lebih seperti metodologi lengkap. Mereka semua sangat bergantung pada pemilih kelas CSS kerana mereka sangat boleh diguna semula.

Menggunakan SASS boleh membantu

untuk menulis pemilih ini dengan cara yang lebih modular. Dengan pemilih bersarang dan mixin, kita boleh tampil dengan penyelesaian yang mewah untuk membina API yang diperlukan. Dalam artikel ini, saya akan memperkenalkan beberapa kaedah ini, menyenaraikan kebaikan dan keburukan masing -masing yang saya fikirkan. Pemilih asli bersarang

dapat bersarang pemilih tanpa perlu mengulangi nama blok asal telah menjadi keperluan jangka panjang dalam SASS. Dalam SASS 3.3, ciri ini akhirnya diperkenalkan. Semasa beta, sintaks yang sangat pelik mula -mula digunakan, dan kemudian berubah menjadi sintaks yang lebih baik apabila versi stabil hidup. Natalie Weizenbaum menerangkan sebab -sebab di sebalik perubahan dalam jawatan ini.

Pada dasarnya, pemilih rujukan (&) boleh digunakan sebagai sebahagian daripada nama subclass untuk membuat kelas lain dengan nama kelas pertama dari tahap akar dokumen (yang bermaksud @at-root tidak diperlukan di sini).

Ciri ini dengan cepat digunakan untuk menulis pemilih BEM, seperti objek media yang sangat popular:

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

Kod sebelumnya akan dikumpulkan sebagai:

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

pro

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

Ia bergantung kepada fungsi asli dan tidak memerlukan pembantu tambahan seperti pembolehubah atau campuran.

Sebaik sahaja anda memahami bagaimana pemilih rujukan (&) berfungsi, mudah untuk menguasai secara keseluruhan.

Kekurangan

Ia mendedahkan & sintaks, yang boleh sedikit mengelirukan dan bahkan menakutkan jika tidak biasa kepada pemaju yang biasa dengan SASS.

Nesting biasanya tidak dicetak dalam direktori akar kecuali @at-root digunakan, yang boleh mengganggu.

• bem mixin

Kerana sintaks yang dihasilkan oleh kelas semasa beta SASS 3.3 sangat hodoh (@at-root #{&} __ elemen), kami tidak lama lagi melihat beberapa campuran di sana sini untuk menyembunyikan kesakitan dan menyediakan API yang lebih mesra.

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

anda boleh menggunakannya seperti ini:

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

kita juga boleh membuat blok campuran dengan cara yang sama, tetapi ia tidak akan berguna seperti blok, kerana blok itu hanya nama kelas. Mari simpannya dengan mudah. Walaupun bagi sesetengah orang, pengubah dan elemen kelihatan terlalu lama, kita melihat beberapa E dan M dalam mekar penuh.

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

pro

• Versi ini menyediakan API mesra yang mudah difahami setelah anda memahami bagaimana BEM berfungsi.

Kekurangan

• Logistik tersembunyi di belakang Mixin, dan menghasilkan pemilih dan kelas baru tidak begitu jelas melainkan anda tahu apa yang sedang berlaku.
• Mixins huruf tunggal mungkin bukan idea yang baik kerana mereka membuat sukar untuk memahami apa yang digunakan oleh campuran. B dan M boleh mewakili banyak perkara.

humanified-bem mixin

Baru-baru ini, saya membaca pendekatan seperti BEM baru oleh Anders Schmidt Hansen. Idea ini adalah untuk menyembunyikan istilah pengubah elemen blok di belakang kata-kata biasa yang masuk akal ketika membaca dengan kuat.

<code>@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}</code>

Dalam kes ini, maksudnya adalah untuk menyembunyikan kod di belakang campuran yang bernama dengan baik supaya kod itu kelihatan seperti menceritakan kisah, jadi campuran baru sebenarnya berguna.

<code>.media {
  // .media 块的样式

  @include element("image") {
    // .media__image 元素的样式

    @include modifier("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include modifier("new") {
    // .media--new 修饰符的样式
  }
}</code>

menggunakan lebih lanjut Anders adalah (..) dan memegang (..) mixin. Idea keseluruhannya mengingatkan saya tentang Mixin When-Inside (..), yang menyembunyikan & di belakang Mixin mesra pengguna apabila gaya elemen mengikut konteksnya yang unggul.

<code>.media {
  // .media 块的样式

  @include e("image") {
    // .media__image 元素的样式

    @include m("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include m("new") {
    // .media--new 修饰符的样式
  }
}</code>

pro

• Pendekatan ini membantu meningkatkan kebolehbacaan kod, sama seperti kita mula menamakan kelas negeri kita menggunakan IS terkemuka- (dipromosikan oleh SMACSS).
• masih berpegang pada pendekatan tertentu (BEM dalam kes ini), tetapi menjadikannya lebih mudah bagi pemaju untuk digunakan.

Kekurangan

• lebih banyak campuran, lebih banyak alat tambahan, dan lebih banyak perkara untuk dipelajari untuk mendapatkan keluk pembelajaran yang lebih stabil. Tidak semua orang suka menangani banyak mixins untuk menulis perkara mudah seperti pemilih CSS.
• Ini mungkin terlalu abstrak untuk sesetengah orang; Ia bergantung kepada keadaan.

Pemikiran Akhir

ingat bahawa menggunakan mana -mana teknik ini akan menghalang asas kod pemilih daripada dicari kerana pemilih tidak benar -benar wujud sebelum dihasilkan oleh SASS. Menambah komen sebelum pemilih dapat menyelesaikan masalah ini, tetapi mengapa tidak hanya menulis pemilih dari awal?

Jika anda mengambil berat tentang asas kod yang boleh dicari, sila jangan gunakan ciri SASS baru untuk BEM semua pemilih (.b {& __ e {}}).

- Kaelig (@kaelig) 12 Mac 2014

Bagaimanapun, kawan -kawan, inilah cara yang paling popular yang saya tahu untuk menulis pemilih CSS dalam sass, antara saya dan anda, saya tidak suka mereka. Dan bukan hanya kerana masalah carian, itu bukan masalah besar bagi saya.

Saya dapat melihat masalah yang mereka cuba selesaikan, tetapi kadang -kadang kesederhanaan melebihi kering. Mengulangi pemilih akar bukanlah masalah besar, ia bukan sahaja menjadikan kod lebih mudah dibaca, kerana ia kurang bersarang, tetapi juga lebih dekat dengan CSS.

kadang -kadang lebih mudah daripada kering.

- Hugo Giraudel (@hugogiraudel) 19 Mei 2015

Soalan Lazim Mengenai Menggunakan Pemilih Kelas CSS Berstruktur SASS

Apakah maksud menggunakan pemilih kelas CSS berstruktur SASS?

Menggunakan pemilih kelas CSS berstruktur SASS adalah penting untuk mengekalkan lembaran gaya yang bersih, diperintahkan dan cekap. SASS (bagi pihak gaya sintetik yang mengagumkan) adalah preprocessor CSS yang membolehkan pemaju menggunakan pembolehubah, peraturan bersarang, campuran, dan fungsi untuk menjadikan CSS lebih dinamik dan boleh diguna semula. Dengan pemilih kelas berstruktur, anda boleh membuat hierarki gaya, menjadikannya lebih mudah untuk memahami hubungan antara unsur -unsur yang berbeza dan gaya mereka. Ini dapat meningkatkan daya tahan dan skalabilitas kod CSS.

Bagaimana menggunakan pemilih wildcard dalam sass?

Pemilih Wildcard, juga dikenali sebagai pemilih sejagat, boleh digunakan dalam SASS untuk memilih mana -mana elemen yang sepadan dengan corak tertentu. Sebagai contoh, anda boleh menggunakan pemilih Wildcard "*" untuk memilih semua elemen. Walau bagaimanapun, SASS tidak secara langsung menyokong nama kelas liar. Jika anda ingin memilih elemen yang nama kelasnya bermula dengan rentetan tertentu, anda perlu menggunakan penyelesaian, seperti menggunakan pemilih atribut. Sebagai contoh, anda boleh menggunakan pemilih [class^="prefix-"] untuk memilih semua elemen yang nama kelasnya bermula dengan "awalan-".

Bolehkah saya menggunakan Arahan @Extend dengan pemilih kelas di SASS?

Ya, arahan @Extend boleh digunakan dalam SASS dengan pemilih kelas. Arahan @Extend membolehkan satu pemilih mewarisi gaya pemilih lain. Ini berguna untuk mengurangkan kelebihan dalam kod CSS. Sebagai contoh, jika anda mempunyai dua kelas yang berkongsi banyak gaya yang sama, anda boleh menentukan gaya tersebut dalam satu kelas dan kemudian gunakan Arahan @Extend untuk menggunakan gaya ini ke kelas lain.

Bagaimana untuk mengatur kod CSS dengan lebih cekap menggunakan SASS?

SASS menyediakan beberapa ciri yang dapat membantu anda mengatur kod CSS anda dengan lebih berkesan. Salah satu ciri bersarang, yang membolehkan anda untuk bersarang pemilih CSS dalam pemilih lain, mencerminkan struktur HTML. Ini boleh menjadikan kod CSS anda lebih mudah dibaca dan diselenggarakan. Ciri lain ialah pembolehubah, yang membolehkan anda menentukan nilai yang boleh diguna semula. Ini berguna untuk mengekalkan konsistensi dalam gaya seperti warna, fon, dan jarak.

Apakah amalan terbaik untuk menggunakan pemilih kelas CSS berstruktur SASS?

Terdapat beberapa amalan terbaik untuk menggunakan pemilih kelas CSS berstruktur SASS. Satu amalan terbaik adalah menjadikan pemilih sebagai spesifik yang mungkin. Ini dapat membantu mencegah gaya dari secara tidak sengaja mempengaruhi unsur -unsur lain. Satu lagi amalan terbaik ialah menggunakan nama kelas yang bermakna untuk menggambarkan tujuan atau fungsi elemen. Ini boleh menjadikan kod CSS anda lebih mudah dibaca dan diselenggarakan. Di samping itu, lebih baik menggunakan konvensyen penamaan yang konsisten untuk kelas anda, seperti BEM (blok, elemen, pengubah) untuk memudahkan untuk memahami hubungan antara kelas yang berbeza.

bagaimana untuk menggunakan semula kod CSS menggunakan mixin dalam sass?

Mixin in Sass adalah cara untuk menentukan gaya yang boleh digunakan semula sepanjang stylesheet. Mixin ditakrifkan menggunakan arahan @mixin diikuti dengan nama dan blok kod CSS. Anda kemudian boleh memasukkan Mixin dalam mana -mana pemilih menggunakan Arahan @include (dikemukakan oleh nama mixin). Ini berguna untuk mengurangkan kelebihan dalam kod CSS dan menjadikannya lebih mudah untuk dikekalkan.

Bolehkah saya menjana kod CSS menggunakan fungsi dalam SASS?

Ya, SASS menyokong fungsi dan boleh digunakan untuk menghasilkan kod CSS. Fungsi dalam SASS ditakrifkan menggunakan arahan @fungsi diikuti dengan nama dan blok kod. Fungsi ini boleh menerima parameter dan mengembalikan nilai yang boleh digunakan dalam kod CSS anda. Ini berguna untuk mewujudkan gaya kompleks yang bergantung kepada keadaan atau pengiraan tertentu.

Bagaimana untuk mengatur kod CSS menggunakan Arahan @Import di SASS?

Arahan @Import di SASS boleh digunakan untuk mengimport fail SASS lain ke dalam fail SASS. Ini berguna untuk menganjurkan kod CSS ke dalam fail berasingan, masing -masing memberi tumpuan kepada bahagian tertentu gaya laman web. Sebagai contoh, anda boleh membuat fail SASS berasingan untuk gaya header, gaya footer, dan gaya kandungan utama, dan kemudian mengimport mereka semua ke dalam fail sass utama.

Bagaimana menggunakan & pengendali untuk merujuk pemilih induk dalam SASS?

& pengendali di SASS boleh digunakan untuk merujuk pemilih induk dalam peraturan bersarang. Ini sangat berguna untuk membuat kelas pseudo atau pemilih pseudo-elemen. Sebagai contoh, jika anda mempunyai peraturan bersarang untuk: hover di dalam peraturan .link, anda boleh menggunakan & pengendali untuk membuat pemilih .link: hover.

Bagaimana untuk membuat gaya responsif menggunakan Arahan @Media di SASS?

Arahan @Media di SASS boleh digunakan untuk membuat pertanyaan media, yang membolehkan anda menggunakan gaya yang berbeza berdasarkan ciri -ciri peranti yang melihat halaman, seperti lebar atau ketinggiannya. Ini sangat berguna untuk membuat reka bentuk responsif yang sesuai dengan saiz skrin yang berbeza. Anda boleh menggunakan Arahan @Media dalam pemilih untuk memohon gaya hanya jika kriteria pertanyaan media dipenuhi.

Atas ialah kandungan terperinci Menstrukturkan pemilih kelas CSS dengan sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!