Variabel SASS

Artikel ini menjelaskan variabel SASS.

Kami akan memberikan penjelasan mendetail tentang variabel SASS dan mempelajari penggunaannya secara bertahap.

YouTube Video

Variabel SASS

SASS adalah bahasa ekstensi CSS yang memungkinkan Anda menulis CSS secara lebih fleksibel dan efisien. Di antara fiturnya, variabel merupakan alat yang kuat untuk menjaga konsistensi gaya sekaligus memudahkan perubahan.

Apa itu Variabel SASS?

Variabel SASS menyediakan cara untuk menyimpan nilai seperti warna, ukuran font, dan jarak yang sering digunakan di CSS, sehingga dapat dikelola di satu tempat.

Dengan menggunakan variabel, Anda dapat dengan mudah mengubah gaya dan meningkatkan keterbacaan kode.

Cara Menulis Variabel

Variabel dapat ditulis sebagai berikut.

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

• Anda harus menambahkan simbol $ di depan nama variabel.
• variable-name adalah nama variabelnya. Disarankan untuk memberikan nama yang jelas dan deskriptif.
• value adalah nilai yang diberikan pada variabel.

Penggunaan Dasar Variabel

Di bawah ini adalah contoh dasar variabel 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}

• Setelah Anda mendefinisikan variabel seperti $primary-color, Anda bisa menggunakan nilai yang sama berkali-kali sesuai kebutuhan.
• Saat mengubah nilai, Anda hanya perlu mengedit definisi variabel, sehingga lebih mudah dalam pemeliharaan.

Output CSS yang Dihasilkan

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

Menggunakan Variabel di Dalam Nesting

Menggabungkan nesting SASS dengan variabel membantu mengatur kode Anda dan memudahkan pengelolaan.

 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 dapat menggunakan variabel di dalam selector yang bertingkat (nested).
• Dengan menggabungkan variabel, Anda dapat mencapai penataan yang fleksibel, seperti membuat warna 10% lebih gelap menggunakan fungsi color.adjust.

Output CSS yang Dihasilkan

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

Variabel dengan Nilai Default

Di SASS, Anda bisa menetapkan nilai default untuk variabel. Penetapan nilai default memungkinkan Anda menggunakan variabel tanpa menimpa yang sudah 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, variabel tidak akan ditimpa jika sudah ada sebelumnya.
• Hal ini berguna dalam pengembangan tim atau untuk pengaturan di seluruh proyek.

Output CSS yang Dihasilkan

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

Cakupan Variabel

Variabel SASS memiliki cakupan, dan ketersediaannya bergantung pada lokasi definisinya. Memahami cakupan membantu mencegah penimpaan variabel secara tidak sengaja.

1. Cakupan Global

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

• Variabel dalam cakupan global tersedia di seluruh file.

2. Cakupan 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}

• Variabel dalam cakupan lokal hanya tersedia dalam nesting atau file tertentu saja.

Menggunakan Variabel dalam Perhitungan

Variabel SASS juga dapat digunakan dalam perhitungan. Perhitungan juga dapat dilakukan pada nilai berbasis satuan maupun warna.

 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 Dihasilkan

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

• Menggunakan variabel untuk menyesuaikan warna atau perhitungan jarak meningkatkan kemudahan pemeliharaan.

Ringkasan

Variabel SASS adalah fitur penting untuk pengelolaan dan pemeliharaan CSS yang efisien.

Penggunaan variabel SASS membantu menjaga konsistensi gaya di seluruh proyek dan memudahkan perubahan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video