Fungsi `@forward` dalam SASS

Articles

Artikel ini menerangkan tentang @forward dalam SASS.

Kami akan menerangkan @forward dengan cara yang mudah difahami, termasuk contoh praktikal.

YouTube Video

Fungsi `@forward` dalam SASS

Apakah itu `@forward`?

Dalam sistem modul SASS, anda menggunakan @use dan @forward sebagai ganti @import. @forward adalah ciri penting untuk memastikan seni bina anda kekal bersih. Ia merupakan arahan yang digunakan untuk ‘mendedahkan’ pembolehubah, mixin, dan fungsi yang ditakrifkan dalam fail lain. Daripada menggunakannya secara sendiri, ia berfungsi sebagai titik masuk dengan menyatakan, 'Gunakan modul ini dari sini.'.

1@forward "variables";

Kod ini bermaksud 'menjadikan kandungan variables.scss tersedia untuk digunakan dari fail lain.'.

Perbezaan antara `@use` dan `@forward`

@use dan @forward kedua-duanya adalah sintaks untuk mengurus modul, tetapi tujuan mereka adalah berbeza dengan jelas. @use adalah arahan untuk menggunakan item di dalam fail, manakala @forward adalah arahan untuk membuat item tersebut tersedia kepada fail 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";

@use mewakili kebergantungan yang diperlukan untuk pelaksanaan fail semasa, manakala @forward menjadikan fail tersebut sebagai titik masuk API awam. Memahami perbezaan ini akan membantu anda menentukan di mana untuk menggunakan @forward.

Mengapa `@forward` diperlukan?

Apabila anda menambah lebih banyak fail Sass, anda mungkin perlu menulis banyak pernyataan @use. Dengan menggunakan @forward, anda boleh memusatkan semuanya ke dalam satu fail utama.

1styles/
2├─ foundation/
3│  ├─ _variables.scss
4│  ├─ _mixins.scss
5│  └─ _index.scss
6└─ main.scss

Dalam struktur ini, _index.scss berfungsi sebagai 'API awam.'.

Penggunaan asas `@forward`

Mari kita lihat penggunaan asas @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;

Daripada menggunakan secara langsung pembolehubah ini dengan @use, anda kumpulkannya menggunakan @forward.

1// _index.scss
2@forward "variables";

Pada tahap ini, _index.scss tidak mengandungi apa-apa; ia hanya merupakan fail perantara.

Menggunakan modul yang telah di-`@forward`-kan

Daripada menggunakan fail individu secara langsung dengan @use, anda hanya @use fail index yang telah mengumpulkan semua @forward di bahagian pengguna. Ini membolehkan anda menggunakannya sebagai antara muka yang stabil tanpa perlu mengetahui struktur dalaman.

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 reka bentuk ini, walaupun lokasi definisi pembolehubah atau mixin berubah, anda boleh menukar struktur dalaman tanpa perlu mengubah kod di bahagian pengguna.

Menggabungkan beberapa modul dengan `@forward`

Dalam pembangunan sebenar, adalah perkara biasa untuk membahagikan pembolehubah, mixin, dan fungsi mengikut peranan masing-masing. @forward boleh ditulis beberapa kali, membolehkan anda menggabungkan modul-modul yang terpisah menjadi satu API terbuka.

Di bawah ini, kami memberikan contoh mixin dan fungsi serta menunjukkan reka bentuk yang mendedahkannya ke luar sebagai satu antaramuka.

 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 mendedahkan fail index ini ke luar, anda boleh menyorokkan struktur dalaman dan menyediakan antara muka mesra pengguna untuk pengguna.

Mengelakkan konflik penamaan (`as`)

Jika nama pembolehubah atau mixin yang sama ditakrif dalam beberapa modul, anda boleh menetapkan as pada @forward untuk menambah awalan ketika mendedahkannya supaya dapat mengelakkan konflik nama.

1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;

Dengan kod ini, $primary-color dalam variables akan didedahkan dengan nama berikut:.

1// foundation.$var-primary-color

Kaedah ini adalah cara untuk menentukan peraturan reka bentuk dengan jelas dan menskalakan secara selamat, dan ia adalah teknik penting, terutamanya dalam projek berskala besar atau perpustakaan yang dikongsi.

Menyembunyikan ahli yang tidak diperlukan (`hide`)

Modul mungkin mengandungi pembolehubah atau mixin yang hanya untuk pelaksanaan dalaman. Dengan menggunakan hide, anda boleh mengecualikan mereka semasa pendedahan semula dan mengelakkan ia diakses dari luar.

1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;

Dengan konfigurasi ini, $debug-color hanya sah di dalam modul, yang dapat menghalang penggunaan tidak sengaja oleh pengguna.

Menentukan ahli yang ingin didedahkan (`show`)

Jika anda ingin mendedahkan hanya mixin atau fungsi tertentu, gunakan show. Dengan mengehadkan apa yang didedahkan, anda boleh menjelaskan tujuan modul dan niat reka bentuknya.

1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;

Dengan menggunakan show seperti ini, ia menjadi jelas pada pandangan pertama API mana yang secara rasmi tersedia untuk digunakan.

`@forward` tidak boleh digunakan secara tersendiri

Perkara penting ialah pembolehubah yang telah di-@forward-kan tidak boleh digunakan dalam fail tersebut.

1@forward "variables";
2
3.test {
4  color: $primary-color; // Error
5}

@forward hanya untuk 'mendedah semula', manakala 'menggunakan' adalah peranan @use.

Contoh pemisahan peranan yang betul

Dalam reka bentuk modul untuk Sass, adalah ideal untuk memisahkan dengan jelas antara lapisan berorientasikan awam (API) dan lapisan pelaksanaan. @forward mentakrifkan API awam, dan @use menggunakannya di bahagian pelaksanaan.

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, jelas mana bahagian adalah antara muka awam dan mana bahagian adalah pelaksanaan dalaman, yang membawa kepada ketelusan reka bentuk yang lebih baik.

Perbezaan utama dengan `@import`

@import mengembangkan semua definisi yang diimport ke dalam skop global. Sebaliknya, @use dan @forward secara jelas mendedahkan 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}

Dengan perbezaan ini, anda boleh meningkatkan kebolehselenggaraan dan keselamatan dengan menghalang penimpaan tidak disengajakan dan kekeliruan kebergantungan.

Ringkasan

@forward ialah ciri penting yang menyokong reka bentuk yang mudah diselenggara. Dengan mengambil berat tentang 'apa yang perlu didedahkan dan apa yang harus disembunyikan sebagai pelaksanaan dalaman', struktur gaya anda menjadi lebih selamat dan lebih mudah dibaca. Dengan menggunakan @use dan @forward dengan betul, anda boleh memperjelas kebergantungan dan mencapai reka bentuk yang kukuh terhadap perubahan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Modul SASS SASS dan BEM

Fungsi `@forward` dalam SASS

YouTube Video

Fungsi @forward dalam SASS

Apakah itu @forward?

Perbezaan antara @use dan @forward

Mengapa @forward diperlukan?

Penggunaan asas @forward

Menggunakan modul yang telah di-@forward-kan

Menggabungkan beberapa modul dengan @forward

Mengelakkan konflik penamaan (as)

Menyembunyikan ahli yang tidak diperlukan (hide)

Menentukan ahli yang ingin didedahkan (show)

@forward tidak boleh digunakan secara tersendiri

Contoh pemisahan peranan yang betul

Perbezaan utama dengan @import

Ringkasan

YouTube Video

Fungsi `@forward` dalam SASS

Apakah itu `@forward`?

Perbezaan antara `@use` dan `@forward`

Mengapa `@forward` diperlukan?

Penggunaan asas `@forward`

Menggunakan modul yang telah di-`@forward`-kan

Menggabungkan beberapa modul dengan `@forward`

Mengelakkan konflik penamaan (`as`)

Menyembunyikan ahli yang tidak diperlukan (`hide`)

Menentukan ahli yang ingin didedahkan (`show`)

`@forward` tidak boleh digunakan secara tersendiri

Perbezaan utama dengan `@import`