SASS中的`@forward`
本文介绍了SASS中的@forward。
我们将以通俗易懂的方式解释 @forward，并包含实际示例。
YouTube Video
SASS中的@forward
@forward是什么？
在SASS的模块系统中，您使用**@use和@forward**而不是@import。@forward 是保持架构整洁的重要特性。它用于“暴露”在其他文件中定义的变量、mixin 和函数。它不是单独使用，而是作为入口点指定：“从这里使用此模块。”。
1@forward "variables";- 这段代码意味着‘让
variables.scss中的内容可被其他文件使用’。
@use和@forward的区别
@use和@forward都是处理模块的语法，但它们的用途完全不同。@use是用于在文件内使用项目的指令，@forward则是将项目暴露给其他文件的指令。
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表示当前文件实现所需的依赖，而@forward则让文件充当公共API入口点。理解这个区别将有助于您决定在哪里使用@forward。
为什么需要@forward？
随着Sass文件数量的增加，您可能需要编写大量的@use语句。通过使用@forward，您可以将所有内容集中在一个入口文件中。
1styles/
2├─ foundation/
3│ ├─ _variables.scss
4│ ├─ _mixins.scss
5│ └─ _index.scss
6└─ main.scss- 在这种结构中，
_index.scss作为‘公共API’。
@forward的基本用法
让我们来看一下@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;- 您不是直接
@use该变量，而是通过@forward将其分组。
1// _index.scss
2@forward "variables";- 此时，
_index.scss并不包含内容；它只是一个中继文件。
使用已被@forward的模块
在消费者端，您只需要@use包含所有@forward的index文件，而不是每个文件单独@use。这样，您可以将其作为稳定的接口使用，无需关心其内部结构。
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}- 通过这种设计，即使变量或mixin的位置发生变化，也可以更换内部结构而无需修改使用方的代码。
使用@forward组合多个模块
在实际开发中，通常会根据作用将变量、mixin 和函数进行拆分。@forward 可以多次书写，从而将分开的模块打包成一个统一的公共 API。
下面我们将提供 mixin 和函数的示例，并演示如何将它们作为单一接口暴露给外部。
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";- 只将这个
index文件暴露给外部，可以隐藏内部结构，并向使用者提供友好的接口。
防止命名冲突（as）
如果多个模块中定义了同名的变量或mixin，您可以在@forward中使用as，在暴露时添加前缀以避免命名冲突。
1// Add a prefix when re-exporting to avoid name collisions
2@forward "variables" as var-*;通过此代码，variables中的$primary-color将以如下名称暴露：。
1// foundation.$var-primary-color- 这种方法是清晰定义设计规则并安全扩展的一种方式，尤其是在大型项目或共享库中至关重要。
隐藏不必要的成员（hide）
模块可能包含仅用于内部实现的变量或mixin。通过使用hide，您可以在重新暴露时将其排除，防止被外部访问。
1// Re-export everything except internal debug variables
2@forward "variables" hide $debug-color;采用这种设置，$debug-color只在模块内有效，有助于防止被使用者误用。
指定要暴露的成员（show）
如果只想暴露特定的mixin或函数，请使用show。通过限制暴露的内容，可以明确模块的用途和设计意图。
1// Explicitly expose only selected mixins as the public API
2@forward "mixins" show button-reset, clearfix;- 采用这种
show方式，一目了然可用的官方API。
@forward不能单独使用
重要的是，被@forward的变量不能在该文件内被使用。
1@forward "variables";
2
3.test {
4 color: $primary-color; // Error
5}@forward只是为了'重新暴露'，而'使用'是@use的职责。
角色分离的典型示例
在Sass模块设计中，理想的做法是明确区分公共层（API）与实现层。@forward定义公共API，@use从实现端消费。
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}- 有了这种结构，哪些部分是公共接口，哪些部分是内部实现非常清晰，从而带来更好的设计透明度。
@import的根本区别
@import会将所有被引入的定义扩展到全局作用域。相反，@use和@forward明确暴露项目，并通过命名空间访问。
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}- 正因为这个区别，可以大幅提升可维护性，并防止意外覆盖和依赖混乱，提高安全性。
总结
@forward是支持可维护设计的重要特性。明确‘哪些需要暴露，哪些作为内部实现隐藏’，会让你的样式结构更安全、更易读。通过合理使用@use和@forward，您可以明确依赖关系，实现对变更具有强健性的设计。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。