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.