@forward
规则是:
。<url>是加载模块地址。但它使加载的模块中的公共成员,对您的模块的用户可用,就好像它们直接在您的模块中定义一样。但是,这些成员不能被外直接调用,需要
当编译模块到 CSS 时,@forward 规则就像@use 一样。来自转载模块的样式将包含在编译的 CSS 输出中,被@forward 的模块可以扩展它,即使它没有被@use 。
scss 语法 | css 语法 |
---|---|
// src/_list.scss @mixin list-reset { margin: 0; padding: 0; list-style: none; } // bootstrap.scss // styles.scss | li { margin: 0; padding: 0; list-style: none; } |
添加前缀
因为模块成员通常与命名空间一起使用,短而简单的名称通常是最易读的选项。但是这些名称在定义它们的模块之外可能没有意义,因此可以选择,为
这是编写@forward "<url>"
作为<prefix>-*的,它将给定的前缀添加到转载的模块的每个 mixin、函数和变量名的开头。例如,如果模块定义了一个名为reset的成员,并且它是被当作list-*转载的,下游样式表会将其当为list-reset。
scss 语法 | css 语法 |
---|---|
// src/_list.scss @mixin reset { margin: 0; padding: 0; list-style: none; } // bootstrap.scss // styles.scss | li { margin: 0; padding: 0; list-style: none; } |
控制可见性
有时,您不想转发模块中的每个成员。您可能希望将某些成员保密,以便只有您的包可以使用它们,或者您可能希望要求您的用户以不同的方式加载某些成员。您可以通过
或者
,来来准确控制转载哪些成员。
hide形式意味着不应该转载列出的成员,但其他所有内容都应该转载。show形式意味着只应转发指定的成员。在这两种形式中,您都列出了 mixin、函数或变量(包括$
)的名称。
// src/_list.scss $horizontal-list-gap: 2em; @mixin list-reset { margin: 0; padding: 0; list-style: none; } @mixin list-horizontal { @include reset; li { display: inline-block; margin: { left: -2px; right: $horizontal-list-gap; } } }
// bootstrap.scss@forward "src/list" hide list-reset, $horizontal-list-gap;
配置模块
该
,转载的模块中,可以使用!default设定上游样式表的默认值,同时仍允许下游样式表覆盖它们。
scss 语法 | css 语法 |
---|---|
// _library.scss $black: #000 !default; $border-radius: 0.25rem !default; $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; code { border-radius: $border-radius; box-shadow: $box-shadow; } // _opinionated.scss | code { border-radius: 0.1rem; box-shadow: 0 0.5rem 1rem rgba(51, 51, 51, 0.15); } |