Daftar Isi

1. Pengantar Sass & SCSS
2. Mengapa Menggunakan Sass & SCSS?
3. Instalasi dan Setup Lingkungan
4. Struktur File dan Sintaks SCSS
5. Variabel di SCSS
6. Nesting Selector
7. Mixins dan Fungsi
8. Inheritance dan Extend
9. Modularisasi dan Partial SCSS
10. Contoh Proyek: Desain Website Sederhana dengan SCSS
11. Sumber Belajar dan Channel Pembelajaran

Pengantar Sass & SCSS

Sass (Syntactically Awesome Stylesheets) adalah preprocessor CSS yang memperluas kemampuan CSS dengan fitur seperti variabel, nesting, mixins, dan lain-lain. SCSS adalah sintaks yang kompatibel dengan CSS, sehingga mudah dipelajari.

Dengan Sass & SCSS, Anda dapat menulis kode CSS yang lebih bersih, terstruktur, dan mudah dipelihara.

Mengapa Menggunakan Sass & SCSS?

• Meningkatkan produktivitas dengan fitur-fitur canggih.
• Membuat kode CSS lebih modular dan mudah dipelihara.
• Mendukung variabel untuk konsistensi warna, font, dan ukuran.
• Nesting selector untuk struktur yang lebih jelas.
• Mixins dan fungsi untuk menghindari pengulangan kode.
• Memudahkan pengelolaan proyek CSS besar.

Instalasi dan Setup Lingkungan

Anda dapat menginstal Sass menggunakan npm (Node.js Package Manager):

npm install -g sass

Untuk meng-compile file SCSS ke CSS, gunakan perintah:

sass input.scss output.css

Anda juga bisa menggunakan tools seperti Dart Sass, LibSass, atau build tools seperti Webpack dan Gulp untuk otomatisasi.

Struktur File dan Sintaks SCSS

File SCSS menggunakan ekstensi .scss dan sintaks mirip CSS dengan tambahan fitur.

Contoh file SCSS sederhana:

$primary-color: #4f46e5;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: white;

  h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.1rem;
  }
}

Variabel di SCSS

Variabel memungkinkan Anda menyimpan nilai seperti warna, ukuran, dan font untuk digunakan berulang kali.

Contoh penggunaan variabel:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting Selector

Nesting memungkinkan Anda menulis selector CSS secara hierarkis, membuat kode lebih terstruktur dan mudah dibaca.

Contoh nesting:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: blue;

        &:hover {
          color: darkblue;
        }
      }
    }
  }
}

Mixins dan Fungsi

Mixins adalah blok kode yang dapat digunakan kembali, sedangkan fungsi mengembalikan nilai yang dapat digunakan dalam SCSS.

Contoh mixin:

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

.container {
  @include flex-center;
  height: 100vh;
}

Contoh fungsi:

@function double($n) {
  @return $n * 2;
}

.box {
  width: double(50px);
  height: double(50px);
}

Inheritance dan Extend

Extend memungkinkan satu selector mewarisi properti dari selector lain, menghindari duplikasi kode.

Contoh penggunaan extend:

.button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: blue;
  color: white;
}

.primary-button {
  @extend .button;
  background-color: darkblue;
}

Modularisasi dan Partial SCSS

Modularisasi dengan partial SCSS memungkinkan Anda memecah kode menjadi file-file kecil yang diimport ke file utama.

Contoh struktur file:

styles/
├── _variables.scss
├── _mixins.scss
├── _base.scss
└── main.scss

Di main.scss:

@import 'variables';
@import 'mixins';
@import 'base';

Contoh Proyek: Desain Website Sederhana dengan SCSS

Berikut contoh kode SCSS untuk membuat desain website sederhana dengan header, konten, dan footer.

// _variables.scss
$primary-color: #4f46e5;
$font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// main.scss
@import 'variables';
@import 'mixins';

body {
  font-family: $font-stack;
  margin: 0;
  background-color: #f9fafb;
  color: #111827;
}

header {
  background-color: $primary-color;
  color: white;
  padding: 1rem;
  @include flex-center;
  font-size: 1.5rem;
  font-weight: 600;
}

main {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;

  h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  p {
    line-height: 1.6;
  }
}

footer {
  background-color: $primary-color;
  color: white;
  padding: 1rem;
  text-align: center;
  margin-top: 2rem;
}

Compile SCSS ke CSS dan gunakan di HTML Anda untuk melihat hasil desain bersih dan terstruktur.

Sumber Belajar dan Channel Pembelajaran

Berikut beberapa sumber dan channel pembelajaran yang sangat membantu untuk belajar Sass & SCSS:

• Sass Official Guide
• Sass Tutorial for Beginners - The Net Ninja (YouTube)
• Traversy Media (YouTube Channel)
• Udemy - Sass & SCSS Tutorial
• CSS-Tricks - Sass Style Guide

Selalu praktikkan dengan membuat proyek nyata agar pemahaman Anda semakin kuat. Selamat belajar dan sukses mendesain dengan Sass & SCSS!