SEKILAS TENTANG CSS PREPROCESSOR

CSS Preprocessor adalah bahasa styling untuk HTML yang memiliki

kemampuan untuk membuat variabel, fungsi, import file dan penulisannya lebih
terstruktur dan efektif dibandingkan dengan CSS yang bertujuan untuk
memperindah tampilan sebuah website. Sehingga saat ini CSS Preprocessor
sangat populer digunakan karena selain cepat dan efisien dalam pembuatan
website, CSS Preprocessor juga mampu menciptakan cara untuk membuat
membangun website lebih mudah dan lebih logis.
Disini

kita

akan

melihat

perbedaan

penulisan

CSS

dengan

Preprocessor CSS. Untuk penulisan CSS biasanya seperti ini.

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

Sedangkan CSS Preprocessor dapat ditulis dengan sangat sederhana

dibandingkan CSS. Anda bisa lihat penulisannya dibawah ini.
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

Sederhananya, CSS Preprocessor ingin menyelesaikan permasalahan

penulisan kode CSS dengan menambahkan fitur-fitur baru ke dalam CSS
sehingga menulis CSS tidak lagi menjadi sebuah tugas yang rumit.
Kekurangan utama dari preprocessor CSS ialah bahwa fitur-fitur ini
ditambahkan

dengan

cara

membuat

bahasa

baru,

menyebabkan kita harus mempelajari sebuah bahasa lagi.

yang

tentunya

Biasanya

preprocessor

CSS

sendiri

cenderung

dirancang

untuk

memudahkan penulisan CSS yang sangat banyak, sehingga preprocessor

lebih cocok digunakan jika ingin merancang sebuah website dari nol.
SASS CSS
SASS (Syntactically Awesome StyleSheets) adalah sebuah bahasa yang
diadopsi dari CSS, namun dengan fitur yang lebih banyak yang dapat
memudahkan designer atau developer membuat sebuah website. SASS bukan
merupakan pengganti dari CSS, namun SASS ini adalah tools yang membuat
CSS menjadi lebih mudah.
Fitur fitur yang terdapat pada SASS adalah:
1. Variables
Berikut adalah contoh sourch penngunaan variables untuk menyimpan
nama font di satu variabel, atau kita ingin menyimpan warna tulisan di
dalam satu variable yang nanti akan bisa panggil langsung didalam kode
yang lain.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

2. Nesting
Untuk fitur ini, kita bisa menulis CSS dengan sistem hierarki, jadi bisa
kita susun sesuai tingkatannya. Ini sangat memudahkan kita, karena di
CSS agak sulit untuk menulis seperti ini, dan akan banyak redudansi.
3. Partials
Partials sendiri adalah fitur dimana kita bisa memanggil file-file scss
secara terpisah. Perlu diingat, nama file harus diberikan karaketer _
pada depan file.
4. Import
Untuk memanggil file lainnya, terutama file partials, kamu bisa
menggunakan perintah @import nama_partials;
DAFTAR PUSTAKA / SUMBER

http://www.ariona.net/mengenal-css-preprocessors-dan-sass/
http://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-lessstylus
http://www.nurulimam.com/2013/10/penggunaan-framework-preprocessorcss.html
https://bertzzie.com/post/30/meningkatkan-kenyamanan-menulis-cssframework-dan-preprocessor