Tutorial SASS untuk Pemula

Setelah mahir CSS, selanjutnya kita bisa coba SASS.

SASS singkatan dari Syntactically Awesome Style Sheets, merupakan sebuah bahasa pra-prosesor (preprocessor) untuk CSS.

Artinya:

Hasil akhir kompilasi (compile) dari bahasa SASS adalah sebuah CSS.

Ini akan membuat kita menulis kode lebih efisien. Karena dengan SASS kita dapat mengurangi penulisan kode CSS yang berulang dan mudah dalam maintenance.

Instalasi SASS

Untuk bisa mengkompilasi SASS menjadi CSS, kita membutuhkan kompilator (compiler).

Ada beberapa cara menginstal SASS:

  1. Menggunakan Node Package Manager (NPM)

    [sudo] npm install -g sass
    

    Catatan: jika kamu menginstal nodejs di root, maka gunakan sudo. Tapi kalau menginstal di home, tidak perlu pakai sudo.

  2. Menggunakan Chocolatey Package Manager (Windows)

    choco install sass
    
  3. Menggunakan Brew (Mac OS X)

    brew install sass/sass/sass
    

Setelah itu, coba ketik perintah sass --version untuk memeriksa versi SASS yang terinstall.

Instalasi SASS di Linux

Versi SASS yang terinstal di komputer saya adalah 2.2.0.

Bagaimana Cara kerja SASS?

SASS seperti bahasa pemrograman, dia harus kompilasi dulu agar dapat digunakan.

Hasil kompilasi SASS akan berupa file CSS. File CSS ini nanti akan kita gunakan pada halaman web.

Berikut ini contoh perintah untuk kompilasi SASS menjadi CSS:

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 😄.