Sass开发【四】
目录
@规则
@use
加载成员
@use别名
私有成员
部分
@import
@mixin和@include
参数
可选参数
@function
可选参数
@error
@warn
@debug
流程控制规则
概述
@if、@else if、@else
@each
@for
@while
其它
@规则
Sass的许多额外功能都以@的形式出现，@是Sass独有的，经过编译后不会生成CSS代码块
Sass共有11个@规则：
- @use：加载来自其他Sass文件的样式
- @forward：加载Sass样式表
- @import：扩展CSS@规则
- @mixin和@include：Sass模板，使Sass代码复用
- @function：定义SassScript函数
- @extend：Sass继承
- @at-root：将内部样式放置在CSS文件根部
- @error：人为触发编译失败并显示错误消息
- @warn：打印警告，但不完全停止编译
- @debug：打印用于调试的信息
- @流程控制规则(@if、@each、@for、@while)：控制样式流程
@use
@use规则加载其它Sass文件样式到当前Sass文件(类似于JS里的export与import)，通过@use加载的Sass文件成为模块，Sass也提供了一些内置模块，里面包含了许多有用的函数
@use格式：
// @use语法
@use "<url>";
// 例如有一个test2.scss文件,可以使用下面语法导入
@use "test2.scss";下面是一个@use使用的例子：
test.scss文件：
@use "test2";
// test.scss
.div {font-weight: bold;
}test2.scss文件：
// test2.scss
.p {font-weight: bold;
}编译后的test.css文件：
.p {font-weight: bold;
}.div {font-weight: bold;
}加载成员
@use某个模块后，可以搭配@include导入该模块的某个mixin或变量或函数
test.scss文件：
@use "test2";
// test.scss
.div {@include test2.rounded;font-weight: bold;
}test2.scss文件：
// test2.scss
$radius:5px;@mixin rounded {border-radius: $radius;
}编译后的test.css文件：
.div {border-radius: 5px;font-weight: bold;
}@use别名
@use也允许我们使用别名，通过as语法设置
@use "test2" as T;
// test.scss
.div {@include T.rounded;font-weight: bold;
}甚至还可以使用“*”通配符
@use "test2" as *;
// test.scss
.div {@include rounded;font-weight: bold;
}私有成员
如果不想让某个变量被导出，可以使用“-”或“_”开头的名称，这样的成员就是私有成员，通过@use无法导入该成员
test.scss文件：
@use "test2" as T;
// test.scss
.div {@include T.rounded;font-weight: bold;width: T.$-width;
}test2.scss文件：
// test2.scss
$radius:5px;
$-width:10px;@mixin rounded {border-radius: $radius;
}编译后的test.css文件：
因为$-width是私有成员，所以在test.scss使用该成员会报错，因此无法编译：
部分
仅用于作为模块加载而不能独立编译的Sass文件以“_”开头(例如_code.scss)，这些被称为部分，它们告诉Sass工具不要尝试独立编译这些文件，导入部分时，可以省略“_”
@import
@import已被Sass官方宣布淘汰，目前不推荐使用，具体信息如下：
⚠️ 注意！
Sass 团队不鼓励继续使用
@import规则。Sass 将在未来几年 逐步淘汰它，最终完全从语言中删除它。建议改为使用 @use 规则。（请注意，目前只有 Dart Sass 支持@use。其他实现的使用者必须使用@import规则。）
@import的问题是什么？
@import规则存在一些严重问题
@import使所有变量、mixin 和函数在全局范围内可用。这使得人们（或工具）很难确定任何东西是在哪里定义的。由于一切都处于全局范围内，库必须为所有成员添加前缀，以避免命名冲突。
@extend 规则 也是全局的，这使得很难预测哪些样式规则会被扩展。
每次导入样式表时都会执行它并发出其 CSS，这会增加编译时间并产生臃肿的输出。
以前无法定义私有成员或对下游样式表不可访问的占位符选择器。
新的模块系统和
@use规则解决了所有这些问题。
@mixin和@include
@mixin允许我们在整个Sass文件中重复使用样式，@mixin和@include的基础使用，这里就不再赘述
参数
mixin允许接收参数，这允许在每次调用它们时自定义它们的行为
test.scss文件：
@mixin rtl($property, $value) {#{$property}: $value;
}.div {@include rtl(float, left);font-weight: bold;
}test.css文件：
.div {float: left;font-weight: bold;
}可选参数
mixin声明的每个参数都必须在@include时传递，也可以通过定义一个默认值，使参数变为可选参数，当不传递该参数时，参数将使用默认值
@mixin rtl($property: float, $value: left) {#{$property}: $value;
}.div {@include rtl;font-weight: bold;
}@function
函数可以在SassScript值上定义复杂操作，可以在样式表中重复使用这些操作
函数使用@function定义，名称可以是不以 -- 开头的Sass标识符，返回调用结果使用@return
test.scss文件：
@function add($a, $b) {@return $a + $b;
}
.div {width: add(1, 2) + px;
}test.css文件：
.div {width: 3px;
}可选参数
函数也允许添加可选参数：
@function add($a, $b:2) {@return $a + $b;
}
.div {width: add(1) + px;
}当可选参数与普通参数混用时，可选参数必须放在所有普通参数的最后，否则会报错
@function add($a:1, $b) {@return $a + $b;
}
.div {width: add(1) + px;
}报错：
修复方法有两种：
- 将可选参数都放在普通参数最后
- 按参数名称传参
@function add($a:1, $b) {@return $a + $b;
}
.div {width: add($b:1) + px;
}@error
@error允许我们人为停止Sass编译，常用于@if判断出错的情况下，强制停止编译
@function add($a:1, $b) {@return $a + $b;
}
.div {@error "这是一个测试错误";width: add($b:1) + px;
}效果：
@warn
@warn打印一串字符串，但是不会停止Sass编译，常用来作为一个提醒
test.scss文件：
@function add($a:1, $b) {@return $a + $b;
}
.div {@warn "这是一个测试警告";width: add($b:1) + px;
}test.css文件：
.div {width: 2px;
}控制台效果：
@debug
@debug打印一串字符串，常用于调试，不会中断Sass编译
@function add($a:1, $b) {@return $a + $b;
}
.div {@debug "这是一个测试警告";width: add($b:1) + px;
}效果：
流程控制规则
概述
流程控制规则可以控制某些代码块是否应该编译，这允许我们在Sass编写某些简单算法来控制Sass的编译
- @if控制是否执行代码块
- @each对列表中的每个元素或映射中的每对元素控制
- @for控制代码块执行次数
- @while控制代码块，直到满足某个条件
@if、@else if、@else
类似于JS里的if、else if、else
test.scss文件：
@mixin test($direction, $width) {@if ($direction == "left") {border-left: $width;}@else if ($direction == "right") {border-right: $width;}@else if ($direction == "top") {border-top: $width;}@else{border-bottom: $width;}
}
.div {@include test("left", 1px);@include test("right", 1px);@include test("top", 1px);@include test("bottom", 1px);
}test.css文件：
.div {border-left: 1px;border-right: 1px;border-top: 1px;border-bottom: 1px;
}@each
@each相当于JS里的forEach方法
test.scss文件：
$sizes: 10px,20px,30px;@each $size in $sizes {.div-#{$size} {width: $size;height: $size;}
}test.css文件：
.div-10px {width: 10px;height: 10px;
}.div-20px {width: 20px;height: 20px;
}.div-30px {width: 30px;height: 30px;
}@for
@for相当于JS里的for方法
test.scss文件：
@for $i from 1 through 3 {.div-#{$i} {width: $i;height: $i;}
}test.css文件：
.div-1 {width: 1;height: 1;
}.div-2 {width: 2;height: 2;
}.div-3 {width: 3;height: 3;
}@while
@while相当于JS里的while方法
test.scss文件：
$i: 1;
@while ($i <= 3) {@debug $i;$i: $i + 1;
} 效果：
其它
更多Sass学习可以参考我的专栏：
CSS_是洋洋a的博客-CSDN博客