lifelong learner — urip iku urup, currently working on accenture.

SASS Part 1 dari 2 – Installasi, Variabel, Nesting, Partial & Import (superset css)

1
Degananda.com -

Selayang Pandang

Sebelum membahas mengenai SASS alangkah lebih baiknya jika kita langsung melakukan installasi SASS hal ini untuk memudahkan proses pengenalan sass itu sendiri. SASS dapat di install dengan menggunakan ruby. Jika anda menggunakan sistem operasi linux atau windows maka ada perlu menginstall ruby terlebih dahulu. Namun , jika menggunakan Mac OSX ruby telah terinstall secara default sehingga tidak perlu melakukan installasi ruby.

Setelah ruby terinstall maka perintah yang digunakan untuk menginstall sas pada sistem operasi adalah (jika anda bukan rootuser , harus menggunakan sudo dan masukan password dari root ).

gem install sass

setelah terinstall cek versi dari SASS dengan menggunakan perintah

sass -v

done , maka SASS telah terinstall pada sistem operasi dan siap untuk digunakan.

Apa itu SASS ?

SASS merupakan singkatan atau kependekan dari Syntactically Awesome StyleSheets yang termasuk pada superset dari CSS. Singkatanya SASS ini menggunakan CSS kemudian mengembangkan fitur-fitur yang tidak ada pada CSS. hal ini sama dengan typescript dan javascript, TS adalah superset dari JS. Yang perlu di ingat SASS tidaklah menggantikan CSS namun SASS hanyalah tools yang membantu kita melakukan coding CSS. Output dari SASS sendiri adalah CSS yang melalui proses compile sama halnya dengan Typescript yang berujung menjadi javascript melalui proses compile.

Mengapa perlu mempelajari SASS ?

Jika anda menyukai ionic maka SASS ini adalah hal yang wajib untuk dipelajari karena ionic tidak menggunakan css untuk styling komponennya , namun menggunakan SASS. Alasan lainnya adalah ketika kita memiliki project yang sangat besar, style sheet (css) yang kita miliki untuk styling keseluruhan project akan menjadi sangat komplex dan sangat susah untuk dimaintain. SASS hadir untuk mensimplekan pengelolaan css itu sendiri dan ditambah sass juga menghadirkan fitur-fitur yang tidak ada dalam css untuk memudahkan koding stylesheet. Contohnya pada sass kita mengenal adannya variabel. Varibel ini sangat berguna ketika kita ingin menyimpan warna – warna yang digunakan pada website/aplikasi.

Hal lain yang menarik adalah SASS support inherintances dengan sass kita dapat membuat stylsheet yang merupakan turunan dari  stylesheet lainnya. Tentunnya hal ini sangat memudahkan kita dalam membuat stylesheet untuk project besar. Namun bukan berarti sass tidak baik untuk digunakan dalam project dengan skala kecil.  Dari ulasan diatas anda dapat menyimpulkan apakah ingin mempelajari sass atau tidak. SASS adalah tool modern yang digunakan untuk membentuk css which is mengerti mengenai penggunaan teknologi paling maju saat ini dapat memberikan poin plus untuk diri kita.

Fitur pada SASS

pada bagian ini akan dibahas mengenai fitur-fitur menarik dari SASS yang dapat sangat membantu pembuatan stylesheet pada project. CSS sendiri mensupport fitur-fitur yang ada dalam SASS ini namun syntax yang digunakan sangat panjang jika dibandingkan dengan sass. SASS dapat mensimplekan(simplify) penulisan syntax jika dibandingkan menuliskannya dengan menggunakan CSS biasa. Hal ini seperti menulis ES6 dengan Javascript akan lebih komplex jika dibandingkan dengan menggunakan Typescript.

1. Variabel & Auto-compile SASS -> CSS

variabel adalah suatu object yang dapat menyimpan value/nilai. Varibel dapat kita gunakan untuk menyimpan berbagai jenis nilai contohnya kode warna ataupun font family value stack. Misalnya kita memiliki tiga buah warna yang digunakan untuk website kita

  1. primary : #3d3d3d
  2. secondary : #dadada
  3. misccolor : #488AFF

jika kita menggunakan css biasa maka kode angka-angka tersebut pasti kita akan tuliskan secara manual. Problem yang muncul adalah ketika kita mau mengganti warna primary atau secondary untuk website maka kita perlu menggatinnya satu-satu diseluruh class / id yang ada pada stylesheet. Ini akan sangat menyita waktu dan rawan untuk melakukan kesalahan. Pada sass kita dapat menyimpannya pada variabel. JIka ingin mengganti warna pada keseluruhan class/id cukup menggantinnya pada variabel. As simple as that !.

Deklrasi variabel dengan menggunakan sass diawal dengan “$” / dollar seperti kita mendefinisikan variabel pada php. Sehingga penulisan tiga buah variabel diatas menggunakan SASS adalah seperti berikut ini :

$primary-color : #3d3d3d;
$secondary-color: #dadada;
$misc-color: #488AFF;

selain dapat menyimpan warna kita juga dapat menyimpan nilai-nilai lainnya seperti pada css contohnya font-stack, nilai padding , nilai margin dan lain sebagainya. Prinsipnya variabel ini akan digantikan dengan nilai dari variabel tersebut ketika dicompile. Contoh pada syntax diatas ketika di compile akan menjadi seperti berikut ini (menjadi css).

/*# sourceMappingURL=mycss.css.map */

Hanya akan menghasilkan sourceMappingURL , variabel akan diletakan pada file .map yang tergenerate pada saat compile dari scss ke css. Proses kompile ini akan dihandle oleh sass. Cara mengkompile saat terjadi perubahan pada file sass kita dapat menggunakan perintah

sass --watch lokasi-style-sheet

sass akan secara otomatis mengkompile file – file berextensi .scss menjadi .css ketika terjadi suatu perubahan pada setiap file .scss di folder tersebut. Selain dapat menggunakan watcher seperti pada perintah diatas kita juga dapat mengkonversi scss ke css per individu file. Perintah yang digunakan adalah

sass sumber_file.scss output_file.css

jika hanya ingin mengkonversi satu buah file tertentu(dengan nama spesifik) gunakan perintah diatas , sedangkan jika ingin mengkonversi seluruh file .scss menjadi .css dalam suatu folder tambahkan parameter –watch dan lokasi folder.  Proses konversi / compile ini akan menghansilkan beberapa file diantarannya

  1. file css
  2. file css.map
    file map ini akan menyimpan variabel-variabel yang kita deklarasikan dalam scss.

contoh pada kasus scss yang kita buat diatas maka isi dari css.map yang dihasilkan adalah sebagai berikut ini :

{
"version": 3,
"mappings": "",
"sources": [],
"names": [],
"file": "mycss.css"
}

kosong tidak terdapat mapping dikarenakan variabel yang kita tuliskan tidak digunakan sama sekali. Sekarang kita akan mencoba untuk menggunakan variabel tersebut kedalam syntax stylesheet. Misalnya variabel tersebut diaplikasi untuk font-color(color) dan background pada class tertentu.

$primary-color : #3d3d3d;
$secondary-color: #dadada;
$misc-color: #488AFF;

body {
    background: $secondary-color;
    color: $secondary-color;
}

setelah kita konversi menjadi .css maka akan menghasilkan kode (css)

body {
  background: #dadada;
  color: #dadada; 
}
/*# sourceMappingURL=mycss.css.map */

sekarang pada file css.map akan muncul nilai dari mapping yang dilambangkan dengan kode-kode tertentu. Nilai mapping (pada bracket) akan muncul apabila variabel ataupun syntax yang khusus ada pada scss (sass) deklarasikan yang kita deklarasikan di aplikasikan pada class / id stylesheet tertentu. Berikut ini adalah file css.map yang dihasilkan

{
"version": 3,
"mappings": "AAIA,IAAK;EACD,UAAU,EAJI,OAAO;EAKrB,KAAK,EALS,OAAO",
"sources": ["mycss.scss"],
"names": [],
"file": "mycss.css"
}

pada intinnya kita tidak perlu merisaukan atau memikirkan apa isi dari file css.map ini. Karena file tersebut yang digunakan oleh compiler sass untuk mengkonversi scss ke css. Paling utama adalah mempelajari mengenai penulisan syntax scss dan kita tinggal menggunakan file css yang telah digenerate oleh sass.

2. Nesting

Nesting memiliki kata dasar “sarang”. Pada saat kita menuliskan kode html biasannya kita melakukan nesting dalam menuliskan syntax-syntaxnya. Contohnya kode dibawah ini

<div id="header">
    <ul class="menu">
        <li class="menu_item">home</id>
    </ul>
</div>

kita dapat merepresentasikan sifat penuliskan secara nested tersebut dengan menggunakan scss. Jika menggunakan css biasannya kita harus menuliskannya sesuai hirarki misalkan “#header menu menu_item”. Namun dengan menggunakan scss kita menuliskannya dalam bentuk nested yang kemudian akan dikonversi oleh sass menjadi format hirarki pada umumnya css. Berikut adalah kode scss yang merepresentasikan html diatas

#header {

    .menu {

        .menu_item {
            font-size: 18px;
        }

    }
}

setelah file scss tersebut dikompile maka akan menghasilkan format hirarki (untuk mengakses element dan melakukan styling) seperti dibawah ini

#header .menu .menu_item {
  font-size: 18px; }

/*# sourceMappingURL=mycss.css.map */

penulisan secara nested pada scss sangat rapi sehingga dapat meningkatkan kemampuan pengelolaan dari kode stylesheet yang kita miliki. Programmer lain yang share project dengan kita juga dapat terbantu dengan adannya nested ini.

3. Partial

Partisi secara harfiah berarti bagian. Terkadang dalam sebuah project kita akan memiliki sebuah file stylesheet yang sangat besar. Solusi secara konvensional adalah membaginnya menjadi dua file .css yang berbeda. Namun ketika kita membaginnya menjadi dua css yang berbeda problem yang muncul adalah ketika kita ingin melakukan minifying (memperkecil ukuran file css) untuk meningkatkan performa dari website kita maka satu per satu dari file css tersebut harus dilakukan minify. Ini sangat membuang waktu. Bagaimana jika file css tersebut mengalami perubahan? kita harus melakukan minify kembali.

Dengan menggunakan sass kita dapat membagi satu file menjadi beberapa partisi. Uniknya , sass akan menggabungkan seluruh parsisi tadi menjadi satu bagian utuh dengan kata lain partisi tersebut akan digabungkan menjadi satu buah file css. Sehingga hanya akan ada satu file css yang dihasilkan dari konversi beberapa file .scss. Untuk menandakan bahwa suatu file .scss merupakan bagian partial dari .scss lainnya sangat sederhannya yakni dengan menambahkan underscore (“_”) diawal penamaan file .scss. Contohnya kita memiliki file .scss bernama bunga.scss. Bunga tersebut memiliki dua partisi yakni :

  1. _tangkai.scss
  2. _daun.scss

cukup buat tiga file dengan nama seperti diatas maka kita telah menggunakan salah satu fitur sass yakni partisi. Langkah selanjutnya adalah menggabungkan ketiga file .scss tersebut dengan menggunakan fitur import.

3. Import

fitur import pada sass digunakan untuk meng”import” file sass yang bersifat partial atau mengimport file sass yang nama awal dari file tersebut diawali dengan underscore “_”. Penulisan import diawali dengan @. Dengan menggunakan import ini kita dapat menggabungkan file sass dengan beberapa parstisi yang dibutuhkan. Format penggunaan import adalah

@import 'nama_file_parsial'. (TANPA underscore dan extensi scss).

kasus yang kita miliki sekarang adalah menggabungkan file bunga.scss sebagai induk / index dengan file _daun.scss dan _tangkai.scss. Pada bunga.scss / index kita akan mengimport dua file yakni _daun.scss dan _tangkai.scss dengan syntax diatas(@import). Berikut ini adalah isi dari ketiga file tersebut

bunga.scss

$warna : #E1A948;

@import 'tangkai';
@import 'daun';

#bunga {
    color: $warna;
    font-size: 20px;
}

daun.scss

$warna_daun : #52ACCC;

#daun {
    color: $warna_daun;
}

tangkai.scss

#tangkai {
    font-size: 20px;
}

maka setelah kita lakukan proses kompile / konversi dari scss ke css , file css yang akan dihasilkan adalah sebagai berikut

#tangkai {
  font-size: 20px; }

#daun {
  color: #52ACCC; }

#bunga {
  color: #E1A948;
  font-size: 20px; }

/*# sourceMappingURL=bunga.css.map */

sangat menarik bukan fitur yang dihadirkan oleh scss ini. Kita akan bersambung part 2 untuk membahas mengenai mixing , extending/inheritence dan operator(menggunakan operator matematika pada scss).