CSS Academy · Pelajaran

Penyarangan Pemboleh Ubah dan Separa

Gunakan pemboleh ubah Sass untuk nilai boleh guna semula, sarangkan pemilih supaya lebih mudah dibaca dan pecahkan kod kepada fail separa.

Pelajaran 1 daripada 413 langkah

Penyarangan Pemboleh Ubah dan Separa ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah Sass?

Sass (Stylesheet yang Hebat dari Segi Sintaks) ialah prapemproses CSS yang memperluas CSS dengan pemboleh ubah, penyusunan bersarang, mixin, fungsi dan banyak lagi. Fail Sass dikompil menjadi CSS standard.

Dua Sintaks Sass

Sass mempunyai dua format fail:

.scss — sintaks superset yang serasi dengan CSS (paling popular)
.sass — sintaks berasaskan inden (tanpa pendakap keriting atau koma bernoktah)

Kursus ini merangkumi SCSS.

Pemboleh Ubah Sass

Pemboleh ubah Sass menggunakan awalan $. Pemboleh ubah ini diselesaikan pada masa kompilasi — tidak seperti sifat tersuai CSS, pemboleh ubah ini tidak hidup dalam pelayar.

<button class="button">Sass Variables</button>

Pemboleh Ubah Sass berbanding Sifat Tersuai CSS

Perbezaan utama:

Pemboleh ubah Sass: pada masa kompilasi, tidak berada dalam pelayar, tidak boleh diubah semasa masa jalan
Sifat tersuai CSS: hidup dalam pelayar, boleh diubah oleh JS, mengambil kira lata

Amalan moden: gunakan kedua-duanya. Gunakan pemboleh ubah Sass untuk logik masa binaan; gunakan sifat tersuai CSS untuk tema masa jalan.

Penyusunan Bersarang

Sass membolehkan pemilih disusun bersarang antara satu sama lain, mencerminkan struktur HTML. Keluaran yang dikompil menggunakan pemilih turunan.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

Pemilih Induk &

& merujuk kepada pemilih induk, lalu membolehkan corak seperti BEM dan pemilih keadaan:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Amaran Kedalaman Penyusunan Bersarang

Elakkan penyusunan bersarang melebihi 3 tahap. Penyusunan yang terlalu dalam menghasilkan pemilih yang terlalu khusus dan menjadikan CSS rapuh. Jika anda mendapati diri anda menyusun terlalu dalam, seni bina CSS itu mungkin perlu difaktor semula.

Separa Sass

Separa ialah fail Sass yang namanya bermula dengan garis bawah (_card.scss). Separa tidak dikompil secara berasingan — ia mesti diimport ke dalam fail lain. Ini mengelakkan penjanaan fail keluaran CSS yang tidak diperlukan.

@use untuk Import

Sass moden menggunakan @use untuk mengimport separa. Ia menyediakan ruang nama bagi mengelakkan konflik pemboleh ubah:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward untuk Pustaka

@forward mengeksport semula ahli modul supaya ahli tersebut boleh digunakan oleh fail yang mengimport pustaka anda:

<span class="badge">Forwarded token (lib.$primary-color)</span>

@import Legasi (Tidak Digalakkan)

Arahan @import yang lebih lama tidak lagi digalakkan dalam Dart Sass. Beralih kepada @use dan @forward untuk ruang nama dan prestasi yang lebih baik.

Semakan Pantas

Apakah pemilih CSS yang dijana oleh Sass daripada penyusunan bersarang .nav { .link { color: white; } }?

Jawab dalam pelajaran interaktif

Imbas Kembali

Pemboleh ubah Sass ($name) diselesaikan pada masa kompilasi. Penyusunan bersarang mencerminkan struktur HTML, tetapi elakkan kedalaman melebihi 3 tahap. & merujuk kepada pemilih induk untuk kelas pseudo, keadaan dan pengubah BEM. Separa (_file.scss) diimport, bukan dikompil secara langsung. Gunakan @use (bukan @import) untuk pemuatan modul Sass moden.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Penyarangan Pemboleh Ubah dan Separa” percuma?

Ya — teks penuh “Penyarangan Pemboleh Ubah dan Separa” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Penyarangan Pemboleh Ubah dan Separa”?

Gunakan pemboleh ubah Sass untuk nilai boleh guna semula, sarangkan pemilih supaya lebih mudah dibaca dan pecahkan kod kepada fail separa. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Penyarangan Pemboleh Ubah dan Separa” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy