Mengenal Konsep Dan Cara Kerja Sass
LATAR BELAKANG
Setelah kemarin kita berhasil menginstall Sass dan sudah mengerti pengertian dari Sass sekarang kita akan menginjak ke materi cara sass bekerja seperti yang sudah saya sampaikan pada artikel sebelumnya.
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.cssTunggu 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 {Selektor .anak berada dalam selektor .ibu. Setelah dikompilasi ke CSS, akan menghasilkan kode seperti berikut ini.
color: blue;
.anak {
font-size: 12px;
}
}
.ibu {Bagaiaman, mudah bukan?
color: blue;
}
.ibu .anak {
font-size: 12px;
}
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>Setelah itu buat kode SASS seperti berikut ini.
<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>
.title {Lakukan kompilasi dengan perintah ini.
border: 4px solid black;
text-align: center;
padding: 60px;
font-family: sans;
.slogan {
font-size: 18px;
color: rgba(0,0,0,0.3);
}
}
sass style.scss style.css
Sekarang kita sudah punya file style.css yang merupakan hasil dari kompilasi kode SASS.
belajar-sass/Nested
├── index.html
├── style.css
├── style.css.map
└── style.scss
Nested tidak hanya untuk selektor saja. Kita juga bisa melakukan nested untuk properti. Misalnya seperti ini.
.title {Setelah dikompilasi akan menghasilkan kode CSS seperti ini.
border:{
top: 4px solid black;
bottom: 4px solid black;
}
}
.title {Variabel dalam SASS
border-top: 4px solid black;
border-bottom: 4px solid black;
}
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?
KESIMPULAN
Oke kita sudah merasakan kemudahan menggunakan Sass yaitu sebagai penyederhana struktur syntax dari css jadi syntax css yang kita buat akan lebih rapi dan yang pasti lebih ringan. Sekian terima kasih
Tidak ada komentar :
Posting Komentar