Modul SASS

Artikel ini menerangkan modul SASS.

Kami menerangkan cara memodularkan SASS menggunakan @use dan @forward, dan bagaimana untuk menggunakan semula pembolehubah, mixin, fungsi, tetapan tema, dan API awam.

YouTube Video

Modul SASS

Sistem modul SASS membantu untuk menentukan skop gaya dengan jelas dan menyediakan reka bentuk yang mudah untuk digunakan semula dan diselenggara.

Konsep Asas Modul

Modul SASS menyelesaikan masalah pencemaran ruang nama global dan pergantungan yang tidak jelas yang wujud pada @import lama. Setiap fail dimuatkan sebagai modul dengan ruang nama sendiri, dan hanya item yang dieksport secara jelas boleh diakses dari fail lain.

Contoh Struktur Fail

Pertama, berikut ialah contoh struktur projek yang realistik. Di bawah ialah contoh sistem reka bentuk yang kecil.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• Struktur ini memudahkan pemodularan serta ujian dan penggantian bahagian.
• Fail separa mempunyai garis bawah pada permulaan nama fail.

Asas @use

@use memuatkan modul dan menyediakan ruang nama. Ini mengelak perlanggaran nama dan menjelaskan modul sumber.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Fail ini adalah ringkas dan hanya mentakrifkan pembolehubah. Pembolehubah yang diterbitkan dari modul boleh dirujuk terus menggunakan @use.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Di sini, modul variables dirujuk menggunakan ruang nama variables.. Pendekatan ini menjadikan asal-usul setiap item jelas.

Memendekkan atau Mengalias Ruang Nama

Penggunaan as membolehkan anda memendekkan ruang nama.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• Ini adalah contoh mengimport variables menggunakan alias singkat vars. Pilih nama berdasarkan keutamaan anda sama ada keterbacaan atau kemudahan menaip.

Definisi Mixin

Mixins dan fungsi juga boleh ditakrif dan digunakan dalam modul. Menjaga konsistensi ulasan dengan konvensyen projek membantu meningkatkan kejelasan.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• Fail ini mentakrifkan mixin untuk kontena. Ia menerima argumen dan menyediakan nilai lalai.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• Ini adalah contoh penggunaan mixin dengan @include.

Mendefinisikan Fungsi

Fungsi digunakan untuk mengembalikan nilai, dan boleh ditakrif serta digunakan semula dalam modul. Dengan membungkus pengiraan nilai reka bentuk dalam fungsi, gaya menjadi lebih stabil dan mudah diselenggara.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Fail ini mendefinisikan satu fungsi yang menukar nilai piksel kepada rem. Nilai asas lalai juga ditetapkan.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• Ini adalah contoh memanggil fungsi melalui @use dan menggunakan hasilnya pada gaya.

Eksport Modul dan @forward (Reka Bentuk API)

Apabila anda ingin mendedahkan beberapa fail dalaman secara luaran, anda boleh menggunakan @forward untuk mencipta 'API awam'.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Beberapa fail dalaman boleh dikumpulkan sebagai satu titik masuk, yang menyediakan API awam. Ini membolehkan pengguna mengakses semua ciri yang diperlukan dengan hanya mengimport satu titik masuk.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• Kandungan variables dan mixins boleh diakses secara kolektif melalui index. @forward menjadikan index sebagai lapisan awam.

Mengawal API dengan pilihan show / hide pada @forward

Jika anda mahu mendedahkan hanya pembolehubah tertentu, gunakan pilihan show atau hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• Menambah !default membolehkan anda menerbitkan nilai yang boleh ditulis ganti.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• Dengan menggunakan show bersama @forward, anda boleh menghadkan API yang didedahkan kepada elemen yang diperlukan sahaja. Pembolehubah dan fungsi yang digunakan secara dalaman tidak akan dapat dilihat dari luar.

Menjadikan Modul Berkonfigurasi (dengan with)

Jika anda menggunakan !default dalam modul, nilai boleh ditulis ganti menggunakan with di bahagian import.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• Modul dengan nilai lalai yang ditakrifkan menggunakan !default boleh menerima konfigurasi melalui with.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• with dalam @use membolehkan pembolehubah lalai dalam modul ditulis ganti semasa import. Ini berguna untuk penukaran tema.
• Perhatikan bahawa with hanya berfungsi semasa import dan anda tidak boleh mengubah nilai itu kemudian.

Contoh Praktikal: Komponen Butang (Contoh Lengkap)

Mari kita cuba mereka bentuk gaya butang menggunakan modul. Mula-mula, asingkan pembolehubah dan mixins ke dalam modul masing-masing.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Pembolehubah lalai untuk butang ditakrifkan di sini. Mengguna !default membolehkan pengguna menulis ganti nilai-nilai ini.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• Mixin asas untuk butang ditakrifkan di sini. Ia diasingkan untuk memudahkan penggunaan semula.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Gaya butang dicipta menggunakan rujukan ruang nama dengan @use. Satu varian ditakrifkan sebagai .button--large.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• Dengan mengimport modul button, anda boleh terus menggunakan gaya butang.

Pertukaran Tema (Menggunakan Beberapa Fail Tema)

Pertukaran tema boleh dilakukan melalui konfigurasi dengan with atau dengan mencipta modul berasingan dan menukar modul mana yang digunakan dengan @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Takrifkan warna jenama dan tetapan lain dalam beberapa fail tema dan tukarkan semasa pembinaan atau import.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Pilih tema sama ada dengan menggunakan with atau dengan mengimport, contohnya, @use 'themes/light' semasa proses pembinaan.

Peribadi dan Awam (Awalan _ dan !default)

Dalam SASS, menambah garis bawah di permulaan nama fail menandakan ia sebagai partial. Namun, ketika mengurus kebolehlihatan eksport modul, gunakan show dan hide dengan @forward untuk mengawal apa yang dieksport.

Anda boleh menggunakan @forward untuk menyusun API awam dan menyembunyikan pelaksanaan dalaman dari luar.

Amalan Terbaik untuk Penggunaan Dunia Sebenar

Berikut adalah beberapa konsep asas yang berguna apabila menggunakan SASS dalam situasi sebenar. Semua garis panduan ini akan membantu mengurangkan kekeliruan semasa pembangunan dan memastikan kod anda teratur.

• Jika pembolehubah mungkin berubah sebagai sebahagian daripada tema, tambahkan !default. Ini memudahkan pengguna untuk menimpa nilai.
• Modul perlu dibahagikan mengikut tanggungjawab dan memfokus pada satu tujuan. Pengurusan menjadi lebih mudah dengan memisahkan pembolehubah, mixin dan komponen.
• Urus kandungan awam dengan @forward dan gunakan show atau hide mengikut keperluan. Menentukan skop perkara yang awam membawa kepada reka bentuk yang lebih selamat.
• Gunakan ruang nama untuk memperjelas modul mana setiap fungsi dimiliki. Ini mengelakkan kekeliruan dengan kod lain.
• Ingat bahawa with hanya berfungsi semasa penggunaan @use. Oleh kerana anda tidak boleh mengubahnya kemudian, tetapkan konfigurasi semasa import.
• Gunakan garis bawah pada permulaan nama fail untuk menjadikannya fail separa, supaya ia tidak dikompilasi secara individu. Ini memudahkan menggabungkan fail-fail ke dalam struktur yang lebih besar.
• Menyertakan contoh penggunaan dalam modul index membantu ujian dan dokumentasi. Ia menjadi lebih mudah untuk pengguna memahami tingkah laku.

Mengingati perkara-perkara ini akan membantu anda mengurus projek besar dan mengekalkan kod yang mudah dibaca secara berkumpulan.

Ringkasan

Sistem modul SASS menyusun kod gaya melalui ruang nama, API awam, dan konfigurasi yang dipermudahkan. Penggunaan @use dan @forward dengan bijaksana memudahkan pembangunan berkumpulan, pertukaran tema, dan reka bentuk pustaka.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video