Catatan Kuliah tentang CSS dan SASS

Pendahuluan

• CSS semakin sulit dikelola seiring bertambahnya ukuran aplikasi.
• Diperkenalkan SASS (Syntactically Awesome Style Sheets) untuk mempermudah pengelolaan CSS.

Konsep Dasar SASS

• Variabel: Memungkinkan kita mengumpulkan nilai (warna, font) dalam satu referensi.
• Penulisan tanpa titik koma dan kurung kurawal.

Format Penulisan

1. Format SASS: Tanpa titik koma dan kurung.
2. Format SCSS: Masih menggunakan titik koma dan kurung, namun mendukung fitur baru.

Instalasi SASS

• Dapat diinstal lewat NPM atau package manager lain seperti Homebrew (untuk Mac).
• Setelah instalasi, cek versi SASS untuk memastikan berhasil.

Membuat File SASS

• Buat file .scss (contoh: input.scss).
• Penulisan lebih rapi: tidak perlu kurung maupun titik koma.
• Gunakan command untuk mengonversi SASS menjadi CSS: sass --watch input.scss:output.css
• --watch akan mengawasi file dan melakukan konversi otomatis saat ada perubahan.

Struktur Folder

• Disarankan untuk mengelompokkan file dalam folder (contoh: dev dan public).
• Output file CSS harus berada dalam folder yang dapat diakses oleh HTML.

Pengenalan Variabel

• Variabel dapat menyimpan nilai yang dapat diakses di mana saja.
• Contoh: $font-main: 'Arial'; body { font-family: $font-main; }

Nested Rules

• Memungkinkan penulisan CSS yang lebih terstruktur.
• Gunakan indentasi untuk nested rules: nav { ul { list-style: none; } }

Penggunaan Sibling Selector

• Menggunakan & untuk menandai sibling.
• Contoh: .alert { &-success { color: green; } }

Operasi Matematika

• SASS mendukung operasi matematika.
• Contoh: width: 100% - 50px;

Fitur Lanjutan

• Extend: Memungkinkan untuk mewarisi style dari class lain.
• Mixins: Mirip fungsi, menerima parameter untuk fleksibilitas.

Modularisasi

• SASS mendukung pembagian file untuk modularitas.
• Menggunakan @import untuk memanggil file lain.

Minifikasi

• File CSS dapat diminifikasi untuk pengurangan ukuran.
• Command: sass --style compressed input.scss:output.css

Penutup

• SASS adalah alat powerful untuk membuat CSS lebih terstruktur dan mudah dikelola.
• Disarankan untuk mengeksplorasi dokumentasi SASS untuk fitur yang lebih lanjutan.