Sass, Bahasa CSS yang Wajib Diketahui Developer Pemula

Tayang 01 Nov 2021 - Dibaca 10 mnt

Isi Artikel

    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!

    Baca Juga: Ingin Terjun ke Dunia Pemrograman? Pelajari Dulu Bahasa Perl

    Apa Itu Sass?

    lowongan kerja web developer

    © Freepik.com

    Sass adalah singkatan dari Syntactically Awesome Style SheetsSass 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?

    Baca Juga: Ingin Berkarier di Bidang Web Development? Pahami Dulu Framework MVC

    Fitur-fitur Sass

    coding programmer

    © 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:

    variabel

    Apabila diubah menjadi format Sass, hasilnya akan terlihat seperti:

    variabel

    Lalu, hasil yang terlihat di CSS adalah;

    sass 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;

    nesting

    Output dari CSS akan menjadi seperti ini;

    nesting

    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;

    partial

    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;

    import CSS

    Hasil dari import akan terlihat di CSS seperti ini. Perlu diingat, ketika meng-import partials, kamu tidak perlu mengetik ekstensi file-nya;

    import CSS

    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;

    mixin

    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;

    mixins css

    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

    sass adalah

    © 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

    Baca Juga: Tertarik Dunia Web Development? Pahami Dulu Aplikasi XAMPP

    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.

    Seberapa bermanfaat artikel ini?

    Klik salah satu bintang untuk menilai.

    Nilai rata-rata 4.6 / 5. Jumlah vote: 7

    Belum ada penilaian, jadi yang pertama menilai artikel ini.

    We are sorry that this post was not useful for you!

    Let us improve this post!

    Tell us how we can improve this post?


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Artikel Terkait