Daftar Isi

1. Pengantar Sass dan CSS Preprocessor
2. Instalasi dan Setup Sass
3. Variabel di Sass
4. Nesting: Struktur CSS yang Bersih
5. Mixins: Kode yang Bisa Digunakan Ulang
6. Inheritance dan Extend
7. Fungsi dan Operasi di Sass
8. Struktur Folder dan File Sass
9. Contoh Project Website dengan Sass
10. Sumber Belajar dan Channel Pembelajaran

1. Pengantar Sass dan CSS Preprocessor

Sass (Syntactically Awesome Stylesheets) adalah sebuah CSS preprocessor yang memperluas kemampuan CSS dengan fitur-fitur seperti variabel, nesting, mixins, inheritance, dan fungsi. Dengan Sass, Anda dapat menulis kode CSS yang lebih terstruktur, mudah dipelihara, dan efisien.

CSS preprocessor adalah alat yang mengubah kode dengan sintaks khusus menjadi CSS standar yang dapat dipahami browser. Sass adalah salah satu preprocessor paling populer dan banyak digunakan dalam pengembangan web modern.

2. Instalasi dan Setup Sass

Untuk mulai menggunakan Sass, Anda perlu menginstal Sass compiler. Cara paling umum adalah menggunakan npm (Node Package Manager).

1. Buka terminal atau command prompt.
2. Jalankan perintah berikut untuk menginstal Sass secara global:

   npm install -g sass

3. Setelah terinstal, Anda bisa meng-compile file .scss menjadi .css dengan perintah:

   sass input.scss output.css

4. Untuk mode watch (otomatis compile saat file berubah), gunakan:

   sass --watch input.scss:output.css

Alternatif lain, Anda bisa menggunakan GUI apps seperti Sass official installer atau tools build seperti Webpack, Gulp, dan lainnya.

3. Variabel di Sass

Variabel di Sass memungkinkan Anda menyimpan nilai seperti warna, ukuran, atau font yang dapat digunakan berulang kali. Ini memudahkan perubahan global dan menjaga konsistensi desain.

$primary-color: #4f46e5;
$font-stack: 'Inter', sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

Pada contoh di atas, $primary-color dan $font-stack adalah variabel yang digunakan di dalam selector body .

4. Nesting: Struktur CSS yang Bersih

Nesting memungkinkan Anda menulis selector CSS di dalam selector lain, yang mencerminkan struktur HTML dan membuat kode lebih mudah dibaca dan dipelihara.

.navbar {
  background-color: #4f46e5;
  padding: 1rem;

  ul {
    list-style: none;
    display: flex;
    gap: 1rem;

    li {
      a {
        color: white;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

Contoh di atas menunjukkan bagaimana selector ul , li , dan a ditulis di dalam .navbar untuk mencerminkan struktur HTML.

5. Mixins: Kode yang Bisa Digunakan Ulang

Mixins adalah blok kode yang dapat dipanggil berulang kali di berbagai tempat, mirip dengan fungsi di bahasa pemrograman. Ini sangat berguna untuk menghindari pengulangan kode.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 200px;
  background-color: #e0e7ff;
}

Pada contoh di atas, mixin flex-center didefinisikan dan kemudian digunakan di dalam selector .container dengan @include .

6. Inheritance dan Extend

Sass menyediakan fitur @extend untuk mewarisi properti dari selector lain, sehingga menghindari duplikasi kode.

.button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  background-color: #4f46e5;
  color: white;
  cursor: pointer;
}

.button-primary {
  @extend .button;
  font-weight: 700;
}

Selector .button-primary mewarisi semua properti dari .button dan menambahkan properti tambahan.

7. Fungsi dan Operasi di Sass

Sass mendukung fungsi bawaan dan operasi matematika yang memudahkan manipulasi nilai CSS.

$base-padding: 10px;

.container {
  padding: $base-padding * 2;
  width: 100% - 20px;
  color: lighten(#4f46e5, 20%);
}

Contoh di atas menggunakan operasi perkalian dan fungsi lighten() untuk mencerahkan warna.

8. Struktur Folder dan File Sass

Untuk proyek besar, penting mengorganisasi file Sass agar mudah dikelola. Berikut contoh struktur folder yang umum:

sass/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _base.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _navbar.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
├── pages/
│   └── _home.scss
└── main.scss

File main.scss akan meng-import semua partial ( _filename.scss ) untuk menghasilkan satu file CSS akhir.

9. Contoh Project Website dengan Sass

Berikut contoh sederhana file main.scss yang menggabungkan beberapa konsep Sass:

// Variables
$primary-color: #4f46e5;
$secondary-color: #6366f1;
$font-stack: 'Inter', sans-serif;

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Base styles
body {
  font-family: $font-stack;
  color: $primary-color;
  margin: 0;
  padding: 0;
  background-color: #f9fafb;
}

// Navbar
.navbar {
  background-color: $primary-color;
  padding: 1rem;

  ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;

    li {
      a {
        color: white;
        text-decoration: none;
        font-weight: 600;

        &:hover {
          color: $secondary-color;
          text-decoration: underline;
        }
      }
    }
  }
}

// Button
.button {
  @include flex-center;
  background-color: $primary-color;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 600;
  border: none;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: $secondary-color;
  }
}

Anda dapat meng-compile file ini menjadi CSS dan menggunakannya di website Anda untuk mendapatkan tampilan yang bersih dan menarik dengan kode yang terstruktur.

10. Sumber Belajar dan Channel Pembelajaran

Berikut beberapa sumber dan channel pembelajaran yang dapat membantu Anda mendalami Sass:

• Dokumentasi Resmi Sass - Panduan lengkap dan referensi fitur Sass.
• Traversy Media (YouTube) - Tutorial web development termasuk Sass.
• The Net Ninja (YouTube) - Seri video pembelajaran Sass dan front-end development.
• Udemy - Sass Course - Kursus berbayar dengan materi lengkap dan proyek nyata.
• CSS-Tricks Sass Guide - Artikel dan tips penggunaan Sass.