Sass, Bahasa CSS yang Wajib Diketahui Developer Pemula
Ditulis oleh : M. Ichsan Medina
Sass adalah bahasa yang membantu web developer membuat CSS untuk membangun website dengan cepat dan mudah.
Mengutip dari The Creative Bloq, Sass juga merupakan tools penting bagi para developer pemula, karena lebih sederahana dan mudah untuk dipakai.
Lalu, apa sih Sass itu? Apa saja kegunaannya? Simak artikel dari Glints ini yuk!
Isi Artikel
Apa Itu Sass?
© Freepik.com
Sass adalah singkatan dari Syntactically Awesome Style Sheets. Sass adalah bahasa preprocessor-nya CSS atau Cascading Style Sheets.
Menurut AT Internet, CSS adalah bahasa komputer yang berfungsi untuk membuat layout dan struktur sebuah halaman HTML.
Tetapi perlu diingat, Sass bukanlah bahasa pemrograman, melainkan bahasa yang dipakai untuk membuat CSS.
Salah satu keuntungan dari menggunakan Sass adalah membuat proses pembuatan CSS menjadi lebih mudah.
Menurut The Creative Bloq, Sass membuat proses membuat CSS lebih cepat karena style sheets yang dipakai lebih teratur dan cepat.
Lalu, ada apa saja di dalam Sass?
Fitur-fitur Sass
© Freepik.com
Berikut adalah fitur-fitur dalam Sass serta contoh-contoh penggunaannya hasil rangkuman dari The Creative Bloq dan Sass-lang.
Syntax
Ada dua opsi syntax di Sass, yaitu SCSS dan Sass.
Perbedaan dari syntax SCSS dan syntax Sass adalah pada penggunaan tanda kurung dan tab.
Selain itu, SCSS menggunakan ekstensi .scss, sehingga sangat kompatibel dengan syntax dari CSS.
Sedangkan Sass menggunakan ekstensi .sass dan tidak menggunakan kurung kurawal serta titik koma untuk mendefinisikan format dokumennya sehingga tidak mengikuti format dasar CSS.
Tetapi jangan khawatir, karena kedua format tersebut bisa diubah ke format lainnya menggunakan command sass-convert.
Variables
Sass memungkinkan kamu untuk menyimpan variabel seperti bahasa pemrograman lainnya.
Fungsi dari variabel di Sass adalah untuk menyimpan informasi atau nilai yang bisa kamu gunakan di style sheet-mu.
Nilai tersebut bisa berupa nilai properti, angka, teks, ukuran elemen, dan lain-lain.
Contohnya ketika kamu ingin mengubah warna tampilan teks di website-mu.
Menggunakan Sass, kamu bisa menyimpan variabel warna di atas dokumen dan menggunakan variabel tersebut untuk mengatur warna elemennya.
Contoh dari SCSS adalah sebagai berikut:
Apabila diubah menjadi format Sass, hasilnya akan terlihat seperti:
Lalu, hasil yang terlihat di CSS adalah;
Nesting
Fungsi nesting di Sass adalah untuk mengurangi jumlah kode yang harus kamu tulis. Pada dasarnya, nesting berguna untuk menyimpan CSS selector agar meniru hierarki HTML-mu.
Tetapi perlu diingat, bila menggunakan nesting dengan sembarang akan membuatCSS overqualified.
Di bawah adalah contoh dari nesting;
Output dari CSS akan menjadi seperti ini;
Partials
Partials adalah file kecil dari Sass yang bisa dimasukkan ke file Sass lainnya. Partial berfungsi seperti code snippet.
Dengan partials, CSS-mu akan lebih mudah untuk diatur dan dijaga. Partials pun akan diberi nama dengan underscore.
Contoh nama file partial akan seperti: _partials.scss
Kamu bisa melihat contoh bentuk partials di bawah ini;
Import
Import digunakan bersamaan dengan partials. Fungsi perintah @import membuatmu bisa memasukkan file partial ke file yang dikerjakan sekarang untuk membuat CSS.
Contoh dari import adalah seperti ini. Di sini, Glints mengambil file yang di bagian partials;
Hasil dari import akan terlihat di CSS seperti ini. Perlu diingat, ketika meng-import partials, kamu tidak perlu mengetik ekstensi file-nya;
Mixins
Salah satu kelebihan dari Sass adalah adanya fitur mixin. Fitur ini bisa membantu kamu untuk membuat kode atau coding yang rumit menjadi simpel.
Contohnya adalah sebagai berikut;
Perintah @mixin di atas telah diberi nama border-radius dengan variabel $radius sebagai parameternya.
Kemudian di bawahnya ada perintah @include, termasuk nama dari mixin (border-radius) dan parameternya (10px). Karena itulah terdapat kode .box {@include border-radius (10px);}
Di CSS, nantinya akan tampil seperti ini;
Extend/Inheritance
Salah satu fitur terbaik Sass adalah perintah @extend.
Hal ini karena fitur ini membuat kamu untuk tidak perlu memasukkan berbagai nama kelas pada elemen HTML.
Selain itu, selector-mu juga bisa menerima gaya selector lain dan dapat diperpanjang sesuai keinginanmu.
Kegunaan Sass untuk Web Developer
© Freepik.com
Dengan Sass, seorang web developer dapat:
- membuat proses CSS dengan mudah.
- melakukan proses maintenance CSS di website-nya
- mendesain website dengan cepat karena kepraktisannya
Nah, itulah serba-serbi Sass yang perlu diketahui, terutama jika kamu seorang developer dan programmer pemula.
Ngomong-ngomong programmer pemula, kamu tak hanya harus belajar Sass, tapi CSS juga penting, lho.
Untuk belajar lebih jauh soal dasar-dasar web development dan programming, yuk cek artikel-artikel di Glints Blog.
Terdapat beragam artikel tech untuk para pemula, lho. Tertarik? Yuk, klik di sini untuk membaca artikelnya sekarang juga.
