Fitur `@forward` di SASS
Artikel ini menjelaskan tentang @forward di SASS.
Kami akan menjelaskan @forward dengan cara yang mudah dipahami, termasuk contoh-contoh praktis.
YouTube Video
Fitur @forward di SASS
Apa itu @forward?
Dalam sistem modul SASS, Anda menggunakan @use dan @forward sebagai pengganti @import. @forward adalah fitur penting untuk menjaga arsitektur Anda tetap bersih. Ini adalah direktif yang digunakan untuk 'mengekspos' variabel, mixin, dan fungsi yang didefinisikan di file lain. Alih-alih menggunakannya sendiri, ia bertindak sebagai titik masuk yang menentukan, 'Gunakan modul ini dari sini.'.
1@forward "variables";- Kode ini berarti 'membuat isi dari
variables.scsstersedia untuk digunakan dari file lain.'.
Perbedaan antara @use dan @forward
@use dan @forward keduanya adalah sintaks untuk menangani modul, namun tujuannya jelas berbeda. @use adalah direktif untuk menggunakan item dalam file tersebut, dan @forward adalah direktif untuk membuat item tersedia bagi file lain.
1// @use: import the module for use in this file
2@use "variables";
3
4// @forward: re-export the module for other files to consume
5@forward "variables";@usemerepresentasikan dependensi yang diperlukan untuk implementasi file saat ini, sedangkan@forwardmembuat file berfungsi sebagai titik masuk API publik. Memahami perbedaan ini akan membantu Anda memutuskan di mana harus menggunakan@forward.
Mengapa @forward diperlukan?
Seiring Anda menambahkan lebih banyak file Sass, Anda mungkin perlu menulis banyak pernyataan @use. Dengan menggunakan @forward, Anda dapat memusatkan semuanya ke dalam satu file entri.
1styles/
2├─ foundation/
3│ ├─ _variables.scss
4│ ├─ _mixins.scss
5│ └─ _index.scss
6└─ main.scss- Dalam struktur ini,
_index.scssberperan sebagai 'API publik.'.
Penggunaan dasar @forward
Mari kita lihat penggunaan dasar dari @forward.
1// _variables.scss
2// Color definitions used across the project
3
4$primary-color: #006ab1;
5$secondary-color: #e0f0ff;
6
7// Internal use only (will be hidden via @forward hide)
8$debug-color: magenta;- Alih-alih langsung menggunakan
@usepada variabel ini, Anda mengelompokkannya dengan@forward.
1// _index.scss
2@forward "variables";- Pada titik ini,
_index.scsstidak berisi apa pun; itu hanya file penghubung.
Menggunakan modul yang telah di-@forward
Alih-alih langsung @use satu per satu file, Anda hanya @use file index yang sudah mengelompokkan @forward di sisi konsumen. Hal ini memungkinkan Anda menggunakannya sebagai antarmuka yang stabil tanpa harus mengetahui struktur internalnya.
1// main.scss
2// Import the public API of the foundation layer
3@use "foundation";
4
5.button {
6 background-color: foundation.$primary-color;
7}- Dengan desain ini, meski lokasi definisi variabel atau mixin berubah, Anda dapat mengganti struktur internal tanpa harus mengubah kode apa pun di sisi konsumen.
Menggabungkan beberapa modul dengan @forward
Dalam pengembangan nyata, umum untuk memisahkan variabel, mixin, dan fungsi sesuai dengan perannya masing-masing. @forward dapat ditulis beberapa kali, memungkinkan Anda untuk menggabungkan modul-modul yang terpisah menjadi satu API publik.
Di bawah ini, kami memberikan contoh mixin dan fungsi serta menunjukkan desain yang mengeksposnya ke luar sebagai satu antarmuka.
1// _mixins.scss
2// Reusable mixins for layout and components
3
4// Reset default button styles
5@mixin button-reset {
6 appearance: none;
7 background: none;
8 border: none;
9 padding: 0;
10 margin: 0;
11 font: inherit;
12 color: inherit;
13}
14
15// Clearfix utility
16@mixin clearfix {
17 &::after {
18 content: "";
19 display: table;
20 clear: both;
21 }
22}
23
24// Internal mixin (not intended to be part of the public API)
25@mixin debug-outline {
26 outline: 2px dashed red;
27} 1// _functions.scss
2// Utility functions for consistent styling
3
4@use "sass:math";
5
6// Convert px to rem based on a 16px root size
7@function rem($px) {
8 @return math.div($px, 16) * 1rem;
9}
10
11// Clamp a value between a minimum and maximum
12@function clamp-value($value, $min, $max) {
13 @return math.max($min, math.min($value, $max));
14}1// _index.scss
2// Re-export variables, mixins, and functions as a single public API
3@forward "variables";
4@forward "mixins";
5@forward "functions";- Dengan hanya mengekspos file
indexini ke luar, Anda dapat menyembunyikan struktur internal dan menyediakan antarmuka yang ramah pengguna bagi konsumen.
Mencegah konflik penamaan (as)
Jika nama variabel atau mixin yang sama didefinisikan di beberapa modul, Anda dapat menentukan as pada @forward untuk menambahkan prefiks saat mengenalkan agar terhindar dari konflik nama.
1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;Dengan kode ini, $primary-color dalam variables akan diekspos dengan nama berikut:.
1// foundation.$var-primary-color- Metode ini adalah cara untuk secara jelas mendefinisikan aturan desain dan mengembangkan skala dengan aman, dan ini merupakan teknik penting, terutama pada proyek skala besar atau library bersama.
Menyembunyikan member yang tidak diperlukan (hide)
Suatu modul mungkin mengandung variabel atau mixin yang memang hanya untuk implementasi internal. Dengan menggunakan hide, Anda dapat mengecualikan mereka saat diekspos ulang dan mencegah akses dari luar.
1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;Dengan konfigurasi ini, $debug-color hanya valid di dalam modul, sehingga membantu mencegah penggunaan tidak sengaja oleh konsumen.
Menentukan member mana yang akan diekspos (show)
Jika Anda ingin mengekspos hanya mixin atau fungsi tertentu, gunakan show. Dengan membatasi apa yang diekspos, Anda dapat memperjelas tujuan modul dan maksud desainnya.
1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;- Dengan menggunakan
showseperti ini, akan langsung terlihat API mana yang resmi tersedia untuk digunakan.
@forward tidak dapat digunakan sendiri
Satu hal penting adalah variabel yang di-@forward tidak dapat digunakan di dalam file itu sendiri.
1@forward "variables";
2
3.test {
4 color: $primary-color; // Error
5}@forwardhanya untuk ‘memperkenalkan kembali’, dan ‘penggunaan’ adalah peran dari@use.
Contoh pemisahan peran yang benar
Dalam desain modul untuk Sass, ideal untuk memisahkan dengan jelas antara lapisan publik (API) dan lapisan implementasi. @forward mendefinisikan API publik, dan @use mengkonsumsinya dari sisi implementasi.
1// _index.scss (public API)
2@forward "variables";
3@forward "mixins";1// _component.scss
2// Consume the public API of the foundation layer
3@use "foundation";
4
5.card {
6 color: foundation.$primary-color;
7}- Dengan struktur ini, menjadi jelas bagian mana yang merupakan antarmuka publik dan mana yang implementasi internal, sehingga mendapatkan transparansi desain yang lebih baik.
Perbedaan mendasar dengan @import
@import memperluas semua definisi yang diimpor ke dalam lingkup global. Sebaliknya, @use dan @forward secara eksplisit mengenalkan item dan mengaksesnya melalui namespace.
1// @import (deprecated)
2// Everything is injected into the global scope
3$color: red;
4
5.button-import {
6 color: $color;
7}
8
9// @use + @forward (recommended)
10// Access values explicitly through a namespace
11@use "foundation";
12
13.button-use {
14 color: foundation.$primary-color;
15}- Karena perbedaan ini, Anda dapat sangat meningkatkan kemudahan pemeliharaan dan keamanan dengan mencegah penimpaan tak disengaja dan kebingungan dependensi.
Ringkasan
@forward adalah fitur penting yang mendukung desain yang mudah dipelihara. Dengan memperhatikan ‘apa yang diekspos dan apa yang disembunyikan sebagai implementasi internal’, struktur gaya Anda menjadi lebih aman dan mudah dibaca. Dengan menggunakan @use dan @forward dengan tepat, Anda dapat memperjelas dependensi dan mencapai desain yang tahan terhadap perubahan.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.