因为语雀目前代码块不支持Sass|Scss， 所以代码块使用css来代替
@规则
清单
| 分类 | 规则 | 作用 | 相关规则 |
|---|---|---|---|
| 文件操作 | @use | 用于从其他Sass文件加载 mixins、functions、variables | |
@forward | 相当于TS的 export * from xxx， 作用同@use，但是主要用于组织Sass文件结构， 方便组合多个模块做为同一个入口 | ||
@import | 导入模块（不推荐） | ||
| 封装与重用 | @mixin | 用于定义可复用样式代码块 | @include @content``@at-root |
@include | 用于使用可复用样式代码块 | @mixin @content | |
@content | 指代传给 mixin的内容 | @include @content | |
@function | 定义方法，用于复杂操作 | @return | |
@extend | 继承样式类 | ||
@at-root | |||
| 开发调试 | @error | 用于抛出错误 | |
@warn | 用于抛出警告 | ||
@debug | |||
| 条件判断 | @if``@else | 条件判断 | |
| 循环 | @each | 循环list或map键值对，@each <变量> in <表达式> { ... } | |
@for | 循环特定数量 @for <变量> from <表达式> to <表达式> { ... } | ||
@while | 条件循环 @while <expression> { ... } |
详细解释
@use
@use默认以引入的文件名作为命名空间，为我们减少了起名的心智负担， 比如 @use "./variables"
这样我们使用 variable.scss中的变量就需要使用 variables.$xxx的形式。
我们还可以为命名空间起别名， 比如 @use "./variables" as v，然后通过 v.$xxx的形式使用变量。
如果还嫌麻烦，我们还可以 @use "./variables" as *， 这样就相当于取消命名空间，将 variables中的变量直接暴露出来。
同时，我们可以在样式模块中使用 -或 _来声明私有变量， 这样就不会在 @use的时候被导入
@forward
相当于TS的 export * from xxx， 作用同@use，但是主要用于组织Sass文件结构， 方便组合多个模块做为同一个入口
使用 @forward "<url> as <prefix>-*语法可以为引用的模块内的所有 方法、变量、混入 添加前缀
使用 @forward "<url>" hide|show <members...> 语法可以让我们 隐藏(hide)或暴露(show) 模块的指定成员
也可以使用 @forward "<url>" with (<variables...>)来覆盖上游模块默认变量($xxx !default)
@import（推荐使用@use）
与传统CSS @import不同，Sass import 在编译期间进行（CSS 在浏览器中发送多个HTTP请求），并且Sass import可以在一个@import语句中引用多个样式文件（使用逗号分隔）
推荐使用 @use 来替代 @import， 因为
@import导入的方法、变量、混入均为全局变量，且也会导入私有变量。如果样式文件过多，会导致我们无法分辨变量的来源而导致问题。- 并且每次
@import都会将源文件编译为CSS来进行输出，会增加编译时间。
@mixin和 @include
用于样式模块的复用。
使用@mixin <名称> { 样式... } 或 @mixin <名称> (<参数...>) { 样式... }语法来定义一个混入, 使用 @include来使用混入
带参数的 mixin 像定义JS方法一样可以为参数设置默认值来将参数置为可选。@mixin demo($bg, $width: 50px, $height: 50px) { ... } $bg为必填参数, 如果 $width, $height 任一及以上没有传入， 则使用冒号后面的默认值。
注: 传入 null 不会触发默认值
@mixin也可以使用 ...来支持参数列表
@mixin order($height, $selectors...) {
@for $i from 0 to length($selectors) {
#{nth($selectors, $i + 1)} {
position: absolute;
height: $height;
margin-top: $i * $height;
}
}
}
@include order(150px, "input.name", "input.address", "input.zip");可以使用 sass:meta的keywords来获取参数列表对象
@use "sass:meta";
@mixin syntax-colors($args...) {
@debug meta.keywords($args);
// (string: #080, comment: #800, variable: #60b)
@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
}
}
}
@include syntax-colors(
$string: #080,
$comment: #800,
$variable: #60b,
)@content
可以使用 @content来使用传给 mixin的样式代码块，一个mixin可以使用多个@content标签
@mixin hover {
&:not([disabled]):hover {
@content;
}
}
.button {
border: 1px solid black;
@include hover {
/* @content所指代的块内容 */
border-width: 2px;
}
}
可以使用 @include <mixin> (args...) using (arg) { ... }的方式来更灵活的使用内容
@at-root
经常用于@mixin中（其他样式块中也可使用），用于将样式提升至文档根而非嵌套。
@function
用于定义方法， 与@mixin写法类似，不过需要使用 @return来返回方法执行结果
支持可选参数，参数列表
@extend
用于继承其他选择器的全部样式。
语法为 @extend selector，继承多个选择器需要使用逗号分隔选择器
@each
each可以用来循环列表以及Map键值对
$icons-value: "\f112", "\f12e", "\f12f"
$icons-map: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
$icons-list:
"eye" "\f112" 12px,
"start" "\f12e" 16px,
"stop" "\f12f" 10px;
@each $value in $icons-value { ... }
@each $name, $value in $icons-map { ... }
@each $name, $value, $size in $icon-list { ... }如何取到循环下标呢？
方案1：
在循环外定义一个下标变量， 然后通过each内进行计数
$size-list: xs, sm, base, lg, xl;
$i: 0;
@each $size in $size-list {
$i: $i + 1;
#{$name}--#{$size}: #{$base};
}
方案2：使用 nth方法查找当前元素下标
$size-list: xs, sm, base, lg, xl;
@each $size in $size-list {
$i: nth($size-list, $size);
#{$name}--#{$size}: #{$base};
}@for
用于循环数字
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child(3n + #{$i}) {
background-color: lighten($base-color, $i * 5%);
}
}@while
@use "sass:math";
/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
@while $value > $base {
$value: math.div($value, $ratio);
}
@return $value;
}
$normal-font-size: 16px;
sup {
font-size: scale-below(20px, 16px);
}@error、 @warn 和 @debug
用于输出错误、警告和调试信息
语法为 @error "message"