Share

Setelah mengenal Sass dan belajar untuk menginstalasinya seperti di artikel sebelumnya di sini.  Pada artikel ini, saya akan menulis tutorial berbagai fungsi yang bisa digunakan dalam Saas untuk menghasilkan script CSS yang lebih mudah di maintain.

Sass membuat kode CSS lebih mudah di-maintain. Kita bisa menyelesaikan lebih banyak hal dengan sedikit kode, lebih mudah dibaca, dan dalam waktu yang lebih singkat. Di versi 3 Sass mengubah sintaks utamanya menjadi .scss. SCSS adalah superset dari CSS, dan pada dasarnya ditulis sama persis, namun dengan semua fitur Sass baru yang lebih baik.

Variable

Sass membawa variabel ke CSS. Nilai yang dapat diterima untuk variabel mencakup angka, string, warna, null, daftar dan map. Variabel di Sass ditulis dengan menggunakan simbol $.

Contoh file variable.scss

Untuk meng-generate file scss menjadi css, silakan baca artikel sebelumnya : Tutorial Sass Untuk Membuat CSS Lebih Terstruktur Dan Dinamis

Contoh file variable.html

Fungsi Matematika atau Perhitungan

Tidak seperti CSS, Sass memungkinkan kita untuk menggunakan ekspresi matematika. Sehingga sangat membantu dalam mixin, dan memungkinkan kita melakukan beberapa hal menarik dengan script markup kita.

Operator yang didukung meliputi:

  • +  Tambahan
  • –  Pengurangan
  • /  Pembagian
  • *  Perkalian
  • %  Modulus
  • ==  Sama Dengan
  • !=  Tidak Sama Dengan

Contoh file math.scss :

Contoh file math.html

Nesting atau Fungsi Bersarang

Salah satu fitur Sass yang paling bermanfaat adalah kemampuan untuk menyarangkan deklarasi. Sehingga kita bisa mengelompokkan beberapa deklarasi class menjadi satu.

Contoh file nesting.scss:

Contoh file nesting.html :

Import

Dengan fungsi import, Anda bisa membagi file css secara terpisah dan mengimpornya ke dalam satu sama lain. Hal ini membuat lebih mudah mengorganisasi file css karena bisa dipecah dan tentunya akan sangat membantu ketika bekerja sama dalam satu tim.

Contoh file import.scss

Contoh file import.html

Pada artikel selanjutnya saya akan menulis mengenai extend dan placeholder, mixin serta fungsi directive.

Semoga bermanfaat 🙂