目录
3、@import不可以用with进行配置,如果需要可以在@import语句前对模块变量重新赋值【此方法兼容性一般】
Sass中的模块化主要是指外部的scss、sass文件可以作为模块导入到其他文件中。
如果一个自定义的sass、scss文件,仅作为库模块引入,那么我们的取名可以用短下划线开头 _,这样该文件不会自动去编译加载,而是仅会在被引用之后被编译。这样的文件我们称为Partial(代码片段)。
如果在一个文件夹下(例如名为folder)定义 _index.scss 或者 _index.sass ,导入 folder(即直接导入文件夹名),其会自动解析文件夹中的index文件并导入
而模块中被定义的variables、functions、mixins则被称作member(成员)。
模块的导入和使用主要由@use、@forward、@import三种语法来实现
*注意:三者导入的都是URL,而非file_path,可以自动解析相对定位。一些内置模块可以直接导入使用。
一、@use
1、命名空间
- @use导入模块后,若在本文件调用模块中的成员,需要在以 模块名.成员 的形式访问
// src/_corners.scss
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}
// style.scss
@use "src/corners";
.button {
@include corners.rounded;
padding: 5px + corners.$radius;
}
- 可以用as给模块取别名,而 as * 代表无需访问模块名,可直接调用内部成员
// src/_corners.scss
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}
// style.scss
@use "src/corners" as c;
.button {
@include c.rounded;
padding: 5px + c.$radius;
}
// src/_corners.scss
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}
// style.scss
@use "src/corners" as *;
.button {
@include rounded;
padding: 5px + $radius;
}
2、私有变量
模块里可以定义私有变量 , 形如 $-* 或者 $_*,导入后,外部无法访问模块内该私有变量。
// src/_corners.scss
$-radius: 3px;
@mixin rounded {
border-radius: $-radius;
}
// style.scss
@use "src/corners";
.button {
@include corners.rounded;
// This is an error! $-radius isn't visible outside of `_corners.scss`.
padding: 5px + corners.$-radius;
}
对于非私有变量,模块被调用后,不仅可以访问,还可以重新赋值。
如果再次调用模块中的成员,将会是重新赋值后的值
3、用with改变模块中的默认值
// _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;
}
// style.scss
@use 'library' with (
$black: #222,
$border-radius: 0.1rem
);
但是,如果 A @use B , B @use C,A是无法访问C模块中的成员的!如果要使得 C在A和B模块间通用,就需要使用下面的 @forward
二、@forward
@forward本质是转发模块资源,是用于组织各文件中模块资源的方法。
但它本身的调用并不直接加载、编译scss文件,只是让模块中的资源经过导入后可公开访问
1、给forward模块起别名,让成员加前缀
给各模块的成员加上前缀,可以明确成员变量的来源,解决冲突
// src/_list.scss
@mixin reset {
margin: 0;
padding: 0;
list-style: none;
}
// bootstrap.scss
@forward "src/list" as list-*;
// styles.scss
@use "bootstrap";
li {
@include bootstrap.list-reset;
}
2、利用hide or show手动控制成员的可访问性
hide代表模块中被hide的成员不可公开访问;show代表模块中仅仅只有被show的成员可公开访问
形如:
// 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;
3、可以修改模块中的默认值,之后也能为@use...with再度修改
@use...with不可以加 !default字段,是因为这已经处于要将模块编译的阶段。
但@forward在配置时,则可以加该字段:
// _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
@forward 'library' with (
$black: #222 !default,
$border-radius: 0.1rem !default
)
三、@import
@import作为css也支持的语法,已经在被慢慢淘汰,现在最推荐的还是用@use对模块进行导入。
但一些scss才支持的@import特性,还是值得我们了解~
1、不存在命名空间,成员变量在import之后直接公开
这也是最危险的一点,一旦import之后,成员均可直接访问而不存在模块化的命名空间,容易导致冲突。
2、可以在嵌套语法中使用import
在选择器嵌套中导入import,可以使得样式仅在当前选择器作用域下生效
// _theme.scss
pre, code {
font-family: 'Source Code Pro', Helvetica, Arial;
border-radius: 4px;
}
//_library.scss
p {
color: red;
}
//boot.scss
div {
@import "theme","library";
width: 20px;
}
*可以用逗号分隔导入文件,一次性导入多个!