---

Apa Itu Partials?

Partials adalah file Sass yang memiliki nama file yang diawali dengan garis bawah _ (underscore), seperti _colors.scss atau _typography.scss. Underscore ini memberitahu Sass bahwa file tersebut tidak boleh dikompilasi secara langsung menjadi file CSS terpisah. Sebaliknya, mereka dimaksudkan untuk “diimpor” atau “digunakan” oleh file Sass lain.

Bayangkan Anda sedang membangun sebuah rumah. Anda tidak akan membuat semua denah, spesifikasi material, dan instruksi konstruksi menjadi satu gulungan kertas besar. Sebaliknya, Anda akan memiliki denah terpisah untuk fondasi, pipa, kelistrikan, dan sebagainya. Partials melakukan hal yang sama untuk CSS Anda—mereka adalah cetak biru untuk bagian-bagian tertentu dari gaya situs web Anda.

Manfaat Menggunakan Partials:

1. Organisasi: Partials memungkinkan Anda mengelompokkan kode CSS berdasarkan fungsinya. Anda dapat memiliki satu file untuk variabel (misalnya, _variables.scss), satu untuk mixin (_mixins.scss), satu untuk tata letak (_layout.scss), dan seterusnya. Ini membuat proyek Anda terstruktur dan mudah ditemukan.
2. Pemeliharaan: Jika Anda perlu mengubah warna utama situs web, Anda hanya perlu membuka satu file (_colors.scss) dan mengubahnya di sana. Anda tidak perlu mencari dan mengganti setiap instance warna di seluruh file besar.
3. Dapat Digunakan Kembali: Partials seperti _mixins.scss atau _buttons.scss dapat dengan mudah digunakan kembali di berbagai proyek, menghemat waktu dan upaya.
4. Menghindari Redundansi: Daripada menyalin dan menempelkan aturan gaya yang sama berulang kali, Anda dapat menempatkannya di partial dan menggunakan @use di mana pun Anda membutuhkannya.

---

Menggunakan @use untuk Mengimpor Partials

Sebelum Sass 1.25.0, aturan @import adalah cara utama untuk menggabungkan partials. Namun, aturan @use diperkenalkan sebagai pengganti yang lebih baik, menawarkan fitur-fitur yang lebih canggih dan lebih aman.

Sintaks dasar untuk @use adalah: @use 'nama-file-partial';

Mari kita lihat sebuah contoh sederhana.

Misalkan kita memiliki dua file partial:

• _colors.scss
• _typography.scss

Dan satu file Sass utama:

• styles.scss

File: _colors.scss

SCSS

$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;

File: _typography.scss

SCSS

@use 'sass:math';

$base-font-size: 16px;

@mixin font-style($size: $base-font-size, $weight: 400) {
  font-size: math.div($size, $base-font-size) * 1rem;
  font-weight: $weight;
}

File: styles.scss

SCSS

@use 'colors';
@use 'typography';

body {
  color: colors.$text-color;
  background-color: colors.$primary-color;
  @include typography.font-style(20px, 700);
}

h1 {
  @include typography.font-style(32px, 700);
  color: colors.$text-color;
}

Ketika Sass mengkompilasi styles.scss, ia akan mengambil kode dari _colors.scss dan _typography.scss dan menggabungkannya ke dalam satu file CSS output. Perhatikan bahwa di @use, Anda tidak perlu menyertakan underscore atau ekstensi .scss.

---

Mengapa @use Lebih Baik daripada @import?

Meskipun @import masih didukung, @use adalah standar yang direkomendasikan untuk semua proyek Sass baru. Berikut adalah alasan utamanya:

1. Namespacing Otomatis

@use secara otomatis menciptakan namespace untuk setiap partial yang Anda gunakan. Ini membantu mencegah tabrakan nama. Dalam contoh di atas, kita mengakses variabel dari _colors.scss dengan colors.$text-color. Ini sangat jelas dan membantu menghindari kebingungan.

Dengan @import, semua variabel dan mixin akan berada di global scope, yang bisa menyebabkan masalah jika Anda memiliki variabel dengan nama yang sama di dua partial yang berbeda.

Contoh _colors-light.scss dan _colors-dark.scss yang keduanya memiliki $background-color. Dengan @use, Anda dapat mengaksesnya dengan jelas:

• colors-light.$background-color
• colors-dark.$background-color

2. Privasi

@use memungkinkan Anda membuat anggota private. Semua variabel, mixin, dan fungsi yang diawali dengan underscore (_) di dalam partial tidak akan tersedia untuk diimpor oleh file lain. Ini memungkinkan Anda untuk menyembunyikan detail implementasi internal dan menjaga antarmuka publik modul Anda tetap bersih.

3. Beban Kerja Lebih Cepat

Sass @use akan memuat setiap stylesheet hanya sekali, terlepas dari berapa kali Anda menggunakannya. Ini secara signifikan mengurangi waktu kompilasi untuk proyek-proyek besar. Sebaliknya, @import akan memproses setiap file setiap kali ia diimpor, yang bisa sangat memperlambat kompilasi.

4. Kejelasan dalam Ketergantungan

Dengan @use, Anda harus secara eksplisit menyatakan setiap partial yang Anda gunakan di awal file. Ini membuat ketergantungan file Anda menjadi jelas dan mudah dipahami, sehingga pengembang lain dapat melihat sekilas file mana yang diandalkan oleh stylesheet Anda.

---

Struktur Proyek yang Dianjurkan

Untuk memaksimalkan penggunaan partials dan @use, Anda dapat mengadopsi struktur proyek yang terorganisir dengan baik. Struktur seperti ini adalah praktik terbaik yang umum:

scss/
|
|-- abstracts/
|   |-- _variables.scss  // Variabel (warna, font, dll.)
|   |-- _mixins.scss     // Mixin (responsif, tata letak, dll.)
|   |-- _functions.scss  // Fungsi khusus
|
|-- base/
|   |-- _reset.scss      // CSS Reset atau Normalize
|   |-- _typography.scss // Gaya font, heading, dll.
|   |-- _base.scss       // Gaya dasar (body, html, dll.)
|
|-- components/
|   |-- _button.scss     // Komponen tombol
|   |-- _card.scss       // Komponen kartu
|   |-- _navigation.scss // Komponen navigasi
|
|-- pages/
|   |-- _home.scss       // Gaya khusus untuk halaman beranda
|   |-- _contact.scss    // Gaya khusus untuk halaman kontak
|
|-- layout/
|   |-- _header.scss     // Tata letak header
|   |-- _footer.scss     // Tata letak footer
|
|-- main.scss            // File utama yang mengimpor semua partial

File main.scss akan berfungsi sebagai manifest yang menggabungkan semuanya:

baca juga:Menerapkan gaya pada elemen HTML terkadang terasa seperti tumpukan buku yang berantakan:

SCSS

@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'base/base';
@use 'components/button';
@use 'components/card';
@use 'components/navigation';
@use 'layout/header';
@use 'layout/footer';
@use 'pages/home';

Dengan struktur ini, setiap tim pengembang dapat dengan cepat menemukan gaya yang relevan untuk setiap komponen atau bagian dari situs web.

Kesimpulan

Menggunakan partials dan aturan @use adalah langkah mendasar untuk menulis CSS yang terukur dan dapat dipelihara. Ini adalah praktik terbaik yang diadopsi oleh pengembang profesional di seluruh dunia. Dengan memecah file Anda menjadi modul-modul yang logis, Anda tidak hanya membuat kode Anda lebih rapi, tetapi juga mempercepat alur kerja Anda, mempermudah pemeliharaan, dan meningkatkan kolaborasi tim. Mulailah mengadopsi praktik ini di proyek Anda berikutnya, dan Anda akan segera melihat betapa jauh lebih mudahnya mengelola stylesheet Anda.

penulis:angga beriyansah pratama