Setelah mahir CSS, selanjutnya kita bisa coba SASS. SASS singkatan dari Syntactically Awesome Style Sheets, merupakan sebuah bahasa tambahan (preprocessor) untuk CSS yang akan membuat kita menulis kode lebih efisien. Karena dengan SASS kita dapat mengurangi pengulangan, maintenance kode CSS lebih mudah, menulis kode yang bersih dan rapi.

Persiapan dan Instalasi SASS

Sebelum kita mulai tutorial ini, persiapkan dulu alat tempurnya. Pertama, Pastikan sudah menginstal Ruby dan Gem di dalam komputernya.

Setelah itu, baru kita bisa instal SASS. Silahkan ketik perintah berikut untuk menginstal.

sudo gem install sass

Bagaimana Cara kerja SASS?

SASS seperti bahasa pemrograman, kita perlu kompilasi dulu sebelum dapat digunakan. Kompilasi (compile) artinya mengubah kode menjadi bentuk yang siap digunakan.

Cara kompilasi SASS dapat dilakukan dengan perintah berikut ini.

sass style.scss style.css

Tunggu sebentar! kok ekstensinya .scss bukan .sass?

Menurut penjelasan thesassway.com, awalnya sintak SASS cukup sulit dipahami karena sangat berbeda dengan CSS.

Pada akhirnya, di versi 3, SASS memperkenalkan struktur sintak barunya yaitu SCSS (Sassy CSS) yang lebih mirip dengan CSS dan mudah dipelajari bagi pemula.

Nesting (Bersarang)

Pertama kita akan pelajari fitur nesting di SASS. Nesting merupakan sebuah teknik penulisan yang meletakan selektor di dalam selektor yang lainya. Contoh:

.ibu {
    color: blue;
    .anak {
        font-size: 12px;
    }
}

Selektor .anak berada dalam selektor .ibu. Setelah dikompilasi ke CSS, akan menghasilkan kode seperti berikut ini.

.ibu {
  color: blue;
}

.ibu .anak {
    font-size: 12px;
}

Bagaiaman, mudah bukan?

Sekarang mari kita coba praktikan. Buat sebuah struktur file seperti ini.

belajar-sass/
├── index.html
└── style.scss

Silahkan buat kode index.html seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
    <div class="title">
        <h1>Belajar SASS</h1>
        <span class="slogan">Gampang bangeett!!</span>
    </div>
</header>
</body>
</html>

Setelah itu buat kode SASS seperti berikut ini.

.title {
    border: 4px solid black;
    text-align: center;
    padding: 60px;
    font-family: sans;
    .slogan {
        font-size: 18px;
        color: rgba(0,0,0,0.3);
    }
}

Lakukan kompilasi dengan perintah ini.

sass style.scss style.css

Sekarang kita sudah punya file style.css yang merupakan hasil dari kompilasi kode SASS.

belajar-sass/
├── index.html
├── style.css
├── style.css.map
└── style.scss

Sekarang cobalah buka dengan browser, hasilnya kira-kira akan seperti ini.

Nested untuk Properti

Nested tidak hanya untuk selektor saja. Kita juga bisa melakukan nested untuk properti. Misalnya seperti ini.

.title {
    border:{
        top: 4px solid black;
        bottom: 4px solid black;
    }
}

Setelah dikompilasi akan menghasilkan kode CSS seperti ini.

.title {
    border-top: 4px solid black;
    border-bottom: 4px solid black;
}

Mari kita coba! Sekarang ubahlah kode yang tadi seperti contoh di atas. Buat nested untuk properti.

Kompilasi lagi, dan lihatlah hasilnya.

Variabel dalam SASS

SASS memungkinkan kita untuk membuat variabel untuk menyimpan sebuah nilai. Nilai yang tersimpan dapat berupa nilai properti, angka, teks, ukuran elemen, url gambar, dsb. Pembuatan variabel di SASS menggunaan simbol dolar ($), kemudian diikuti nama variabelnya. Contoh:

$border-default: 4px solid black;

Pada contoh di atas, kita membuat sebuah variabel bernama $border-default dengan isi berupa nilai border.

Kita dapat menggunakan variabel tersebut dengan cara seperti berikut ini.

.title {
    border: {
        top: $border-default;
        bottom: $border-default;
    }
}

Mudah bukan?

Sekarang cobalah untuk membuat variabel seperti contoh di atas. Tambahkan juga beberapa variabel yang lain.

Penutup

Sampai di sini, sepertinya kita sudah mengenal SASS. Sudah merasakan mudahnya membuat CSS dengan SASS. Masih banyak lagi yang belum kita pelajari tentang SASS. Karena itu, nantikan terus update terbaru di blog ini ya 😄.