Cara Menggunakan CSS Preprocessor: SASS dan SCSS untuk Pemula

Kalau kamu sudah cukup familiar dengan CSS dasar, mungkin kamu pernah merasa kerepotan saat menulis stylesheet yang panjang dan berulang. Nah, di sinilah CSS Preprocessor seperti SASS dan SCSS hadir untuk mempermudah hidup para developer.

Dengan menggunakan SASS/SCSS, kamu bisa menulis CSS dengan fitur modern seperti variabel, nesting, mixin, function, dan modularisasi, yang membuat kode CSS lebih efisien dan mudah dikelola.

Dalam artikel ini, kita akan membahas cara menggunakan CSS preprocessor dari nol, mengenal perbedaan antara SASS dan SCSS, hingga contoh workflow nyata untuk proyek web modern.

Baca juga: Belajar CSS Architecture: BEM, OOCSS, dan SMACSS

Apa Itu CSS Preprocessor?

CSS Preprocessor adalah bahasa yang memperluas kemampuan CSS dengan fitur-fitur seperti:

• Variabel
• Nesting selector
• Mixin (fungsi berulang)
• Inheritance
• Modularisasi file

Hasil akhirnya tetap berupa file CSS biasa yang bisa dibaca oleh browser, karena semua kode SASS/SCSS akan dikompilasi menjadi CSS standar.

Contoh sederhana perbandingan:

Tanpa Preprocessor (CSS biasa):

.button {
    background-color: #3498db;
    color: white;
    border-radius: 5px;
}

.button:hover {
    background-color: #2980b9;
}Code language: CSS (css)

Dengan SCSS:

$primary-color: #3498db;

.button {
    background-color: $primary-color;
    color: white;
    border-radius: 5px;

    &:hover {
        background-color: darken($primary-color, 10%);
    }
}Code language: PHP (php)

Terlihat lebih ringkas dan rapi, bukan?

Mengenal SASS dan SCSS

SASS adalah singkatan dari Syntactically Awesome Style Sheets.

Ia merupakan salah satu CSS preprocessor paling populer di dunia.

Namun, SASS memiliki dua jenis sintaks:

• SASS (original syntax) – tanpa tanda kurung {} dan titik koma ;, mirip seperti Python.
• SCSS (Sassy CSS) – menggunakan sintaks seperti CSS biasa dengan tambahan fitur preprocessor.

Perbedaan SASS dan SCSS

Aspek	SASS	SCSS
Sintaks	Tanpa {} dan ;	Mirip CSS biasa
Ekstensi	.sass	.scss
Kompatibilitas CSS	Tidak 100% sama CSS	100% kompatibel CSS
Populeritas	Lebih klasik	Lebih umum digunakan

Kesimpulan:

Bagi pemula, disarankan belajar SCSS karena sintaksnya lebih familiar.

Cara Install SASS di Komputer

Langkah 1: Pastikan Node.js Terinstal

SASS modern berjalan di atas Node.js.

Cek dengan perintah:

node -v
npm -v

Jika belum terinstal, unduh dari https://nodejs.org.

Langkah 2: Install SASS

Gunakan perintah berikut:

npm install -g sass

Langkah 3: Cek Instalasi

Pastikan sudah terpasang:

sass --version

Langkah 4: Kompilasi File SASS/SCSS

Misalnya kamu punya file style.scss, gunakan:

sass style.scss style.cssCode language: CSS (css)

Atau gunakan watch mode agar otomatis terupdate:

sass --watch style.scss:style.cssCode language: CSS (css)

Struktur File SASS/SCSS

Kamu bisa menulis kode SASS di satu file, tapi best practice-nya adalah memecah menjadi beberapa file (modular).

Gunakan underscore _ di depan nama file partial agar tidak dikompilasi langsung.

Contoh struktur folder:

scss/
│
├── _variables.scss
├── _mixins.scss
├── _header.scss
├── _footer.scss
└── style.scss

Lalu, import semua file partial ke style.scss utama:

@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';Code language: CSS (css)

Fitur-Fitur Utama SASS dan SCSS

1. Variabel

Memudahkan penggunaan nilai berulang.

$primary-color: #3498db;
$font-stack: 'Roboto', sans-serif;

body {
    font-family: $font-stack;
    color: $primary-color;
}Code language: PHP (php)

2. Nesting

Menulis CSS lebih terstruktur seperti hirarki HTML.

nav {
    ul {
        list-style: none;
    }

    li {
        display: inline-block;
        margin-right: 10px;
    }

    a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
            color: darken($primary-color, 10%);
        }
    }
}Code language: PHP (php)

3. Mixin

Fungsi CSS reusable yang bisa dipanggil kapan saja.

@mixin box-shadow($x, $y, $blur, $color) {
    box-shadow: $x $y $blur $color;
}

.card {
    @include box-shadow(0px, 5px, 15px, rgba(0, 0, 0, 0.2));
}Code language: PHP (php)

4. Extend (Inheritance)

Menggunakan kembali style dari selector lain.

%btn {
    padding: 10px 15px;
    border-radius: 5px;
}

.btn-primary {
    @extend %btn;
    background: $primary-color;
    color: white;
}Code language: PHP (php)

5. Operator dan Fungsi

SASS mendukung operasi matematika dan fungsi bawaan.

.container {
    width: 100% - 20px;
}

$spacing: 10px;
.box {
    margin: $spacing * 2;
}Code language: PHP (php)

6. Modul dan Partial

SASS modern menggunakan @use dan @forward sebagai pengganti @import.

// _colors.scss
$primary: #007bff;

// style.scss
@use 'colors';

button {
    background: colors.$primary;
}Code language: PHP (php)

Workflow SASS dalam Proyek Nyata

SASS biasanya tidak digunakan sendirian, melainkan menjadi bagian dari workflow modern bersama alat seperti:

• Gulp / Webpack untuk otomatisasi kompilasi
• VSCode + Live Sass Compiler untuk kompilasi instan
• Framework seperti Bootstrap yang juga dibangun dengan SASS

Contoh pengaturan Gulp sederhana:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(){
    return gulp.src('scss/**/*.scss')
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(gulp.dest('css'))
});Code language: JavaScript (javascript)

Keunggulan Menggunakan SASS/SCSS

Fitur	Keunggulan
Variabel	Konsistensi warna dan ukuran
Nesting	Struktur lebih rapi
Mixin & Extend	Reusable code
Modular	Mudah diatur dan maintain
Kompatibel CSS	Bisa digabung dengan file CSS lama
Otomatisasi	Integrasi mudah dengan build tools

Dengan semua keunggulan ini, tak heran SASS menjadi CSS preprocessor paling populer di dunia frontend development.

Perbandingan CSS Biasa vs SASS

Aspek	CSS Biasa	SASS/SCSS
Kode Reusable	Tidak ada	Ada (mixin, extend)
Modularisasi	Tidak ada	Ada (@import, @use)
Variabel	Tidak ada	Ada
Fleksibilitas	Terbatas	Sangat tinggi
Kompatibilitas	Native	Perlu dikompilasi ke CSS

Kesalahan Umum Saat Menggunakan SASS

1. Tidak memisahkan file partial → sulit dikelola.
2. Menumpuk nesting terlalu dalam → CSS membengkak.
3. Menggunakan banyak variabel serupa → kehilangan konsistensi.
4. Lupa menjalankan kompilasi otomatis → style tidak terupdate.

Belajar CSS Lanjutan dengan SASS

Setelah memahami dasar, kamu bisa lanjut mempelajari:

• SASS Functions (membuat fungsi sendiri),
• Conditional Logic (@if, @for, @each),
• Theming dan Design System dengan variabel global,
• Integrasi dengan framework seperti Tailwind atau Bootstrap.

Dengan begitu, kamu akan memahami bagaimana SASS menjadi fondasi kuat dalam workflow modern developer frontend.

Kesimpulan

Belajar SASS dan SCSS adalah langkah penting bagi siapa pun yang ingin meningkatkan kemampuan CSS ke level profesional. Dengan memahami cara menggunakan CSS preprocessor, kamu akan:

• Menulis kode lebih cepat dan efisien
• Meningkatkan struktur dan modularisasi
• Mempercepat workflow pengembangan website

Mulailah dari dasar, pahami konsep seperti variabel, nesting, dan mixin, lalu integrasikan ke proyek nyata.

Setelah itu, kamu akan merasakan bagaimana SASS mengubah cara kamu menulis CSS selamanya.