Pembolehubah SASS

Artikel ini menerangkan tentang pembolehubah SASS.

Kami akan memberikan penjelasan terperinci mengenai pembolehubah SASS dan mempelajari cara menggunakannya langkah demi langkah.

YouTube Video

Pembolehubah SASS

SASS ialah bahasa sambungan CSS yang membolehkan anda menulis CSS dengan lebih fleksibel dan cekap. Antara ciri-cirinya, pembolehubah merupakan alat yang berkuasa untuk mengekalkan konsistensi gaya sambil memudahkan perubahan.

Apakah Pembolehubah SASS?

Pembolehubah SASS menyediakan cara untuk menyimpan nilai seperti warna, saiz fon, dan jarak yang sering digunakan dalam CSS, supaya semuanya boleh diurus di satu tempat.

Dengan menggunakan pembolehubah, anda boleh mengubah gaya dengan mudah dan meningkatkan keterbacaan kod.

Cara Menulis Pembolehubah

Pembolehubah boleh ditulis seperti berikut.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Anda perlu meletakkan simbol $ di hadapan nama pembolehubah.
• variable-name ialah nama pembolehubah. Adalah disyorkan untuk memberi nama yang jelas dan deskriptif.
• value ialah nilai yang diberikan kepada pembolehubah.

Penggunaan Asas Pembolehubah

Di bawah adalah contoh asas pembolehubah SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Apabila anda telah menetapkan pembolehubah seperti $primary-color, anda boleh menggunakan nilainya sebanyak mana yang diperlukan.
• Untuk mengubah nilai, anda hanya perlu mengubah definisi pembolehubah, menjadikan penyelenggaraan lebih mudah.

Output CSS Yang Dijana

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Menggunakan Pembolehubah dalam Penetasan (Nesting)

Menggabungkan penetasan SASS dengan pembolehubah membantu mengatur kod anda dan memudahkan pengurusan.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Anda boleh menggunakan pembolehubah di dalam penyeleksi bertingkat.
• Dengan menggabungkan pembolehubah, anda boleh mencapai gaya yang fleksibel, seperti membuat warna 10% lebih gelap menggunakan fungsi color.adjust.

Output CSS Yang Dijana

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Pembolehubah dengan Nilai Lalai

Dalam SASS, anda boleh menetapkan nilai lalai untuk pembolehubah. Menetapkan nilai lalai membolehkan anda menggunakan pembolehubah tanpa menulis ganti pembolehubah yang sedia ada.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Dengan menambahkan !default, pembolehubah tidak akan ditulis ganti jika ia sudah ditakrifkan.
• Ini sangat berguna dalam pembangunan pasukan atau untuk tetapan seluruh projek.

Output CSS Yang Dijana

1p {
2    font-size: 16px;
3}

Skop Pembolehubah

Pembolehubah SASS mempunyai skop, dan ketersediaannya bergantung kepada di mana ia ditakrifkan. Memahami skop membantu mengelakkan penulisan ganti pembolehubah yang tidak disengajakan.

1. Skop Global

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Pembolehubah dalam skop global boleh diakses di keseluruhan fail.

2. Skop Lokal

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Pembolehubah dalam skop lokal hanya boleh digunakan dalam penetasan atau fail tertentu sahaja.

Menggunakan Pembolehubah dalam Pengiraan

Pembolehubah SASS juga boleh digunakan dalam pengiraan. Pengiraan boleh dilakukan ke atas nilai berasaskan unit dan warna juga.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Output CSS Yang Dijana

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Penggunaan pembolehubah untuk pelarasan warna atau pengiraan ruang boleh meningkatkan kebolehselenggaraan.

Ringkasan

Pembolehubah SASS ialah ciri penting untuk pengurusan dan penyelenggaraan CSS yang cekap.

Penggunaan pembolehubah SASS membantu mengekalkan gaya yang konsisten di seluruh projek dan memudahkan perubahan.

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

YouTube Video