Dasar-dasar SASS
Artikel ini menjelaskan dasar-dasar SASS.
Kami akan menjelaskan fitur dasar SASS secara bertahap dan mendemonstrasikan cara menggunakannya dengan kode sampel yang praktis.
YouTube Video
Dasar-dasar SASS
SASS (Syntactically Awesome Stylesheets) adalah bahasa stylesheet yang memperluas fungsi CSS. Dengan menggunakan SASS, Anda dapat memanfaatkan fitur-fitur lanjutan yang tidak tersedia di CSS, seperti variabel, nesting, mixin, dan pewarisan. Hal ini membuat pengelolaan dan penggunaan ulang stylesheet menjadi jauh lebih mudah.
Apa itu SASS?
SASS adalah bahasa yang menyederhanakan penulisan CSS sekaligus memungkinkan pengaturan gaya yang lebih fleksibel dan kuat. SASS juga menawarkan sintaks SCSS (Sassy CSS), yang mirip dengan sintaks CSS standar. Berikut ini adalah contohnya:.
Contoh SCSS
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}Contoh CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}Menyiapkan SASS
Cara Instalasi
Untuk menggunakan SASS, pertama instal Node.js lalu instal SASS dengan perintah berikut:.
1npm install -g sassCara Kompilasi
Untuk mengompilasi file SASS (.scss atau .sass) menjadi CSS, gunakan perintah berikut:.
1sass input.scss output.cssAnda juga dapat menggunakan opsi watch untuk memantau perubahan file dan melakukan kompilasi secara real-time.
Variabel
SASS memungkinkan Anda menggunakan variabel untuk menggunakan kembali nilai seperti warna dan ukuran font.
Kode Contoh
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- Kode ini menggunakan variabel SASS untuk mendefinisikan warna dan font, serta menggunakannya kembali di dalam selektor
bodyuntuk meningkatkan konsistensi dan kemudahan pemeliharaan.
Hasil Kompilasi
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}Penulisan Bersarang (Nesting)
SASS meningkatkan keterbacaan kode dengan memungkinkan selector CSS ditulis secara bersarang.
Kode Contoh
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- Kode ini menggunakan hierarki bertingkat untuk memperjelas struktur gaya secara visual.
Hasil Kompilasi
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}Mixin
Mixin memungkinkan Anda untuk menggunakan kembali kode pada beberapa selector.
Kode Contoh
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- Kode ini mendefinisikan gaya
border-radiusmenggunakan@mixindan menggunakannya kembali dibuttondan.carddengan menggunakan@include, sehingga memungkinkan penataan yang efisien tanpa duplikasi.
Hasil Kompilasi
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}Pewarisan (@extend)
Pewarisan memungkinkan Anda menerapkan gaya yang sudah ada ke selector lain.
Kode Contoh
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- Kode ini mendefinisikan selektor placeholder
%button-styledan menggunakan@extenduntuk menerapkan gaya umum padabuttondan.link-button, sehingga mendorong penggunaan ulang dan konsistensi.
Hasil Kompilasi
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}Pernyataan Kondisional dan Perulangan
SASS mendukung pernyataan kondisional dan perulangan untuk menghasilkan gaya secara dinamis.
Contoh Pernyataan Kondisional
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- Kode ini menggunakan fungsi
ifmilik SASS untuk mengganti warna latar belakang dan teks berdasarkan nilai$theme, sehingga memungkinkan pembuatan gaya dinamis melalui kondisi.
Contoh Perulangan
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- Kode ini menggunakan loop SASS
@foruntuk secara dinamis menghasilkan kelas dari.column-1hingga.column-3.
Hasil Kompilasi
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}Membagi File dan Mengimpor
SASS memungkinkan Anda membagi file dan menggunakannya kembali dengan @use atau @import.
Struktur File
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}Hasil Kompilasi
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}Ringkasan
Menggunakan SASS mempermudah penulisan CSS dan meningkatkan penggunaan ulang serta pemeliharaan kode.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.