🖌️

Panduan Lengkap tentang CSS dan SASS

Aug 25, 2024

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.