Web Development & Design

SCSS: Pengertian, Cara Kerja, dan Fitur-Fiturnya

CSS merupakan styling language penting dalam pengembangan tampilan website. Sayangnya, aturan penulisan CSS dianggap kurang efisien. Tak heran kini banyak developer yang menggunakan SCSS agar pekerjaan mereka lebih cepat dan mudah.

Apa itu SCSS? Di artikel ini, kami akan membahas lengkap tentang SCSS, mulai dari pengertian, fitur dan cara kerjanya. Yuk, langsung simak penjelasannya!

Apa itu SCSS?

SCSS atau Sassy CSS adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri adalah preprocessor CSS, yaitu sebuah program untuk mengolah data menggunakan syntax tertentu dengan output CSS.

SCSS banyak digunakan karena memiliki aturan penulisan yang lebih ramah bagi developer. Selain itu, banyak fitur yang ditawarkan agar coding jadi lebih efisien. Jadi, Anda tak perlu berulang kali menulis kode yang sama seperti ketika coding dengan CSS. 

Lalu, bagaimana cara kerja SCSS sebagai preprocessor?

Pertama-tama Anda melakukan coding dengan syntax SCSS, lalu menyimpan file tersebut dengan ekstensi .scss. Nah, karena file .scss tidak dapat dibaca oleh browser, maka akan ada proses kompilasi (preprocessing) agar menjadi sebuah file CSS. 

Apa Saja Fitur-Fitur SCSS?

Berikut ini adalah beberapa fitur SCSS yang membuat pekerjaan coding Anda lebih mudah:

1. Nesting

Nesting adalah fitur yang membantu Anda mengurangi frekuensi penulisan selektor dengan cara mengelompokkannya dalam satu kelas yang sama.

Ketika Anda menggunakan CSS untuk  merancang navigasi bar sebuah website, inilah  contoh kode yang akan digunakan:

nav {
background-color:#333;
padding:1em;
}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav ul li {
display:inline-block;

Dalam contoh itu, Anda perlu menuliskan nav dalam setiap tag. Sebab, tag adalah parent dari setiap kelas. 

Ketika menggunakan SCSS dengan fitur nesting, Anda cukup menggunakan kode nav untuk setiap kelas sebagai berikut: 

nav {
background-color:#333;
padding:1em;
ul {
  margin:0;
  padding:0;
  list-style:none;
  li {
    display:inline-block;
  }
}
}

Dengan demikian, pekerjaan coding bisa dilakukan lebih cepat, bukan?

2. Variables

Variabel merupakan fitur untuk menyimpan rules yang sering Anda gunakan. Jadi, ketika Anda ingin mengubah rules di banyak elemen, Anda tidak perlu mengubah rules satu-persatu. Cukup dengan sekali perubahan saja.  

Contohnya, Anda memiliki 20 variabel dengan nama boks. Variabel itu mewakili warna background yang berbeda tapi  memiliki ukuran yang sama. 

Jika Anda menuliskannya dalam CSS, contoh kode yang digunakan adalah seperti ini: 

.box-1 {
width: 100px;
height: 100px;
background: red;
}
.box-2 {
width: 100px;
height: 100px;
background: yellow;
}

.box-20 {
width: 100px;
height: 100px;
background: blue;
}

Masalah yang muncul adalah jika suatu hari klien Anda ingin mengubah ukuran semua elemen menjadi lebih besar. Tentu Anda perlu mengganti kode ukuran width dan height satu persatu, hal ini tentu akan merepotkan Anda.

Nah, dengan SCSS, Anda bisa menyimpan rules width dan height sebagai sebuah  variabel. Contohnya seperti ini:

$box-width: 100px;
$box-height: 100px;

Nantinya jika Anda ingin merubah ukuran semua elemen box, cukup dengan menentukan ukuran variable width dan height sesuai keinginan, seperti contoh ini: 

$box-width: 200px;     // changed from 100px to 200px
$box-height: 200px;    // that’s all!
.box-1 {
width: $box-width;  // using variables now instead of pixels
height: $box-height;
background: red;
}
.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}

.box-20 {
width: $box-width;
height: $box-height;
background: blue;
}

3. Mixins

Mixins adalah fitur untuk mengelompokkan rules yang sering Anda gunakan dengan nama tertentu. Jadi, ketika membutuhkan kombinasi rules tersebut, Anda cukup mengetikkan nama mixin-nya.

Fitur ini terutama diperlukan jika Anda sering menggunakan jenis dan ukuran font tertentu untuk keperluan branding. 

Bagaimana penerapannya?

Misalnya, Anda memiliki font rules Arial, Helvetica, dan Sans Serif dengan ukuran 16 px. Anda bisa membuat mixin dan menamainya my-font dengan mengetikkan command @mixin seperti ini:

@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}

Ketika Anda membutuhkan kombinasi rules tersebut, Anda cukup menggunakan @include seperti ini:

p {
@include my-font;
}

4. Imports

Imports adalah fitur untuk memecah file CSS yang berukuran besar dengan cara mengurangi baris kode di file CSS. Hasil pecahannya berupa file Sass yang lebih kecil. Tujuannya agar kode CSS Anda lebih mudah dan cepat dibaca oleh compiler. 

Begini contoh penulisan sintaksnya:

// file Sass utama Anda
@import ‘file’;
@import ‘File lain’;
.class {
// kode Anda
}

5. Extend

Extend adalah fitur yang digunakan untuk mewariskan kode salah satu selektor kepada selektor lain. Sehingga, Anda tidak perlu mengulang penulisan kode jika beberapa selektor memiliki properti yang sama. 

Misalnya, Anda memiliki kode CSS seperti ini: 

.contact {
color: #333;
border: 1px solid #bbb;
box-shadow: 1px 1px 0 #ddd;
margin: 0 0 10px;
padding: 15px;
}

.maps {
background-color: yellow;
color: #333;
border: 1px solid #bbb;
box-shadow: 1px 1px 0 #ddd;
margin: 0 0 10px;
padding: 15px;
}

.body {
background-color: orange;
color: #333;
border: 1px solid #bbb;
box-shadow: 1px 1px 0 #ddd;
margin: 0 0 10px;
padding: 15px;
}

Nah, seperti yang Anda lihat, .contact, .maps, dan .body memiliki properti yang sama. Jika selektor yang Anda tulis semakin banyak, akan perlu waktu mengerjakannya dan coding menjadi lebih kompleks. Dengan memanfaatkan fitur extend, Anda bisa merampingkan kode menjadi seperti ini:

.website {
color: #333;
border: 1px solid #bbb;
box-shadow: 1px 1px 0 #ddd;
margin: 0 0 10px;
padding: 15px;
}

.contact {
@extend .meal-box;
}

.maps {
@extend .meal-box;
background-color: yellow;
}

.body {
@extend .meal-box;
background-color: orange;
}

6. Operator

Operator adalah fitur yang membantu Anda melakukan perhitungan matematis. Misalnya, menghitung width pada kolom di sebuah kelas. Berikut ini adalah contoh penggunaannya:

$columnCount: 12;
@for $i from 1 through $columnCount
{
  .column-#{$i}
  {
      float: left;
      width: percentage($i/$column-count);
  }
}

7. Conditional

Conditional adalah fitur yang mengeksekusi kode CSS hanya jika suatu kondisi terpenuhi. Fitur ini ditulis dengan @if

Misalnya, Anda ingin memberi warna biru jika angka yang muncul di bawah 5. Begini contoh penggunaannya:

$test: 3;
p {
@if $test < 5 {
color: blue;
}
}

Karena kondisinya benar, yaitu 3 lebih kecil daripada 5, maka angka akan berwarna biru. Begini output CSS nya:

p {
color : blue;
}

Anda bisa menambahkan lebih banyak kondisi lagi, contohnya seperti ini:

$test: 3;
p {
@if $test < 5 {
color: blue;
@if $test == 3 {
  text-color: white;
  }
}
}

Kemudian eksekusi kode CSS nya akan menjadi seperti ini:

p {
color : blue; text-color: white;
}

Kondisi @if diikuti dengan @else if dan @else. Else if hanya akan mengeksekusi kondisi yang benar dan mengabaikan kondisi yang salah. Contohnya seperti ini:

$test: 3;
p {
@if $test > 3 {
    text-color: red;
} @else if $test < 3 {
    text-color: blue;
} @else if $test == 3 {
    text-color: white;
}
}

Maka, kode CSS nya seperti ini:

p {
text-color: white;
}

Sedangkan, @else akan dieksekusi jika kondisi @ if salah. Contohnya seperti ini:

$test: 12;
p {
@if $test < 3 {
  text-color: red;
} @else if $test == 3 {
  text-color: blue;
} @else {
  text-color: white;
}
}

8. Loops

Loops adalah fitur yang digunakan untuk mengeksekusi kode berulang kali. Loops terdiri dari @while dan @for.

@while digunakan untuk mengeksekusi kode berulang dengan suatu kondisi yang sama. Begini contoh penggunaannya:

$p: 3;
@while $p < 5 {
.item-#{$p} {
color: red; $p : $p + 1;
}
}

Output kode CSS nya seperti ini:

.item-3 {
color: red;
}
.item-4 {
color: red;
}

@for digunakan untuk mengeksekusi kode dengan jumlah yang spesifik. Misalnya, mengeksekusi kode sebanyak 10 kali. Berikut contoh penggunaannya:

@for $i from 1 through 5 {
  .list-#{$i} {
    width: 2px * $i;
}
}

Maka kode CSS nya akan menjadi seperti ini:

.list-1 {
margin-left: 2px;
}
.list-2 {
margin-left: 4px;
} .list-3 {
margin-left: 6px;
} .list-4 {
margin-left: 8px;
} .list-5 {
margin-left: 10px;
}

Instalasi SASS

Untuk menggunakan SCSS, Anda tentu perlu menginstall SASS.

Ada dua cara untuk menginstall SASS, yaitu dengan menggunakan aplikasi scout atau command prompt / cmd. Dalam tutorial ini, kami menggunakan cmd

Bagi Anda yang menggunakan windows, Anda perlu menginstall Ruby  terlebih dahulu. Bagi Anda yang menggunakan Mac, cukup buka terminal.

Pada Windows, klik Start Command Prompt with Ruby. 

Setelah cmd terbuka, ketikkan gem install sass. Proses ini membutuhkan koneksi internet.

Jika instalasi sudah selesai, akan muncul tampilan seperti ini:

Untuk memastikan apakah SASS Anda sudah terinstall, silakan ketikkan sass -v pada cmd atau terminal Anda. Kemudian klik Enter.

Jika muncul informasi versi Ruby Sass, berarti instalasi SASS berhasil. Dengan begitu, Anda bisa menulis kode SCSS di aplikasi SASS tersebut. 

SCSS vs SASS

SCSS merupakan sintaks terbaru SASS yang dikenalkan mulai versi 3. Sebelumnya, sintaks yang digunakan adalah Sass. Meskipun sama-sama berfungsi sebagai preprocessor CSS, keduanya memiliki berbagai perbedaan, terutama dalam penulisannya.  

SCSS

$ukuran : 20px;
$warna : green;


h1{
background : $bg-color;
color :$warna;
}
p{
background:$bg-color;
font-size: $ukuran;
color:$warna;
}

SASS

$warna:green
$ukuran:20px


h1
background : $bg-color


p
background : $bg-color
color : $warna
font-size : $ukuran

Seperti terlihat pada contoh di atas,  SCSS menggunakan semikolon dan kurung kurawal, sedangkan SASS tidak menggunakannya.

Jadi, bagi Anda yang familiar dengan CSS, akan lebih mudah mempelajari SCSS  karena penulisan sintaksnya lebih mirip dengan CSS. 

Selain itu, meskipun sintaks SASS lebih mudah dan singkat, tapi SCSS lebih ekspresif karena bisa menggunakan berbagai fitur seperti mixins dan extend. 

Sintaks SASS butuh lebih banyak pengembangan agar sesuai dengan project CSS Anda. Sedangkan, SCSS lebih kompatibel dengan project CSS. 

Berikut ini kami tampilkan rangkuman perbedaan sintaks SCSS vs SASS: 

SCSSSASS
Sintaks DasarMenggunakan kurung kurawa dan semikolonTidak menggunakan kurung kurawa dan semikolon
PenggunaanTidak perlu pengembangan sintaks dasarPerlu pengembangan sintaks dasar
Integrasi Mudah diintegrasikan dengan project CSS. Anda cukup menambahkan kode fitur untuk mengembangkan project.Sulit diintegrasikan dengan project CSS. Sebab, Anda harus menulis ulang kode CSS untuk mengembangkan project.
Rules SCSS memiliki aturan yang lebih rumit untuk merampingkan kode CSS. Sebab, Anda perlu menggunakan beberapa jenis anotasi.SASS memiliki aturan lebih sederhana untuk merampingkan kode CSS. Anda hanya perlu mengawali penulisan kode dengan variabel dollar ($)

Yuk Belajar SCSS!

Setelah menyimak artikel ini, Anda sudah memahami apa itu SCSS, kan? SCSS adalah sintaks terbaru dari Sass yang merupakan preprocessor dari CSS. Dengan SCSS, Anda bisa menulis kode CSS dengan lebih cepat berkat fitur-fitur yang dimilikinya. 

Kami sudah menjelaskan berbagai fitur SCSS di atas, sebagai berikut:

  1. Nesting – mengurangi penulisan selektor.
  2. Variabel – memudahkan perubahan rules.
  3. Mixins – menghindari pengulangan kode rules.
  4. Imports – memecah file CSS agar lebih mudah dan cepat dibaca compiler.
  5. Extend – mewariskan kode salah satu selektor kepada selektor lain dengan properti sama.
  6. Operator – menghitung secara matematis.
  7. Conditional – mengeksekusi kode CSS berdasar kondisi tertentu.
  8. Loops – mengeksekusi kode CSS berulang dengan kondisi yang sama.

Untuk menggunakan SCSS, Anda perlu melakukan instalasi SASS menggunakan langkah yang sudah kami jelaskan di atas. Jangan lupa untuk menyimpan pekerjaan Anda dalam file .scss, ya!

Dengan menggunakan SCSS, Anda bisa mengerjakan project pengembangan website lebih mudah dengan hasil yang sama baik. 

Nah, semakin tertarik untuk menggunakan SCSS? Yuk, mulai mencobanya di project website Anda!

Salsabila Annisa

SEO Content Writer at Niagahoster. She developed her writing skill after years of experience in journalism.

Share
Published by
Salsabila Annisa

Recent Posts

10 Website Buat CV Online Gratis, Bikin HR Jatuh Hati! [Bonus Tips]

Sudah sebar Curriculum Vitae (CV) ke banyak perusahaan, tapi tak pernah lolos? Jangan minder dulu. Belum tentu karena pengalaman Anda…

2 days ago

Cara Upload File Nuxt.js di Hosting

Nuxt.js adalah framework yang kian populer untuk membuat aplikasi website. Salah satu kelebihan framework ini adalah SEO Friendly.  Anda sedang…

3 days ago

Produk & Fitur Update September 2021

Setiap harinya kami terus melakukan perbaikan kualitas produk & layanan demi kemudahan para pelanggan Niagahoster. Nah, apa saja update selama…

4 days ago

Cara Membuat Website dengan PHP

Anda ingin membuat website sendiri, tapi bingung mulai dari mana? Tenang, ada cara membuat website dengan PHP dari awal yang…

4 days ago

Denny Triana: A Day in the Life of Engineering Manager

Belum banyak orang tahu kalau di balik website yang hebat, ada peran web engineer.  Web engineer lah yang bertanggungjawab atas…

5 days ago

Indikator Kepuasan Pelanggan: Pengertian dan Cara Mengukurnya

Kepuasan pelanggan bukan hanya dari produk, lho! Total ada enam indikator kepuasan pelanggan yang harus Anda ketahui. Yuk, simak selengkapnya.

6 days ago