在vue3中写的sass语法,应该尽量使用 sass官方推荐的写法, 有的过渡写法,应该尽量摒弃或者直接不使用,避免在大型系统中,由于升级sass 导致改动的地方比较多。
下面仅列举推荐的,过渡的语法见sass官网 breaking-changes
一元运算符 (- 和 +)
scss
// 一元运算符 (- 和 +)
$size: 10px;
.box {
// 报错
// margin: 15px -$size;
// 正确: 编译结果为 margin: 5px;
margin: 15px - $size;
// 正确: 编译结果为 padding: 5px;
padding: (15px)-$size;
}
.box-2 {
// 正确: margin: 15px -10px; 上下15px 左右-10px
margin: 15px(-$size);
}
.box-3 {
// 正确: margin: 25px;
margin: 15px + $size;
// 编译错误 - 有歧义
// padding: 15px -$size;
// 正确: 编译为 加法的意思, padding: 25px;
padding: (15px)+$size;
}
单位问题
Hue(色相)
原生css 在指定颜色的色调时,可以传入 (deg, grad, rad, turn) , 如果没有指定单位,则默认使用deg
在sass里面,最终态: 如果 hls() 里面传递了非角度单位的参数,就会抛出错误, 无单位的
scss
// 颜色单位
#p1 {
// 绿色
// 不带单位 - 正确编译
// 结果: background-color: hsl(120, 100%, 50%); 不带单位
background-color: hsl(120, 100%, 50%);
}
#p2 {
// deg 单位 - 正确编译
// 结果: background-color: hsl(120, 100%, 50%);
background-color: hsl(120deg, 100%, 50%);
}
#p3 {
// rag 单位
// 结果:background-color: hsl(35.4935415699, 100%, 50%);
background-color: hsl(120rad, 100%, 50%);
}
#p4 {
// 结果:background-color: hsl(108, 100%, 50%);
background-color: hsl(120grad, 100%, 50%);
}
#p5 {
// 结果 background-color: hsl(0, 100%, 50%);
background-color: hsl(120turn, 100%, 50%);
}
饱和度 和 亮度
指定 HSL 颜色的饱和度和亮度时,CSS 只允许 %
单位。即使是无单位的数字也是不允许的(与色调不同)。
sass最终,如果再写 hls()
里面的 亮度 和饱和度,没有带单位,则报错
scss
.test-1 {
background-color: hsl(120turn, 100, 50);
}
上述会报错, 最好的就是,带上单位,无论 sass 版本如何迭代,我们都可以稳定升级
scss
.test-1 {
background-color: hsl(120turn, 100%, 50%);
}
正确写法
不透明度
指定颜色的 alpha 值时,CSS(从颜色级别 4 开始)允许介于 0 和 1 之间的无单位值或 %
介于 0%
和 100%
之间的值。在大多数情况下,Sass 遵循这种行为,但函数 color.adjust()
和 color.change()
历史上允许任何单位,并将其解释为无单位。你甚至可以写, color.change(red, $alpha: 1%)
Sass 会返回不透明的颜色 red
。
scss
@use 'sass:color';
.a-1 {
// background: color.change(red, $alpha: 1%);
// 无单位也能编译通过, 但是建议带单位
// 编译结果: background: red;
background: color.change(red, $alpha: 1);
// 结果:color: #c8e1e7;
color: color.adjust(#d2e1dd, $red: -10, $blue: 10);
}
随机数
目前, math.random 不能带单位, 只能是一个数值, 未来可以带单位。
scss
@use "sass:math";
.test-1 {
width: math.random(20)(px);
height: math.random(20)px;
}
编译为:
css
.test-1 {
width: 6 px;
height: 7 px;
}
$weight 单位
2个函数:color.mix
color.invert
, 目前是可以忽略第三个参数 $weight的单位, 但是实际应该带 % 单位,未来会严格检查,如果没有单位,会抛异常
css
@use "sass:color";
// color.mix(颜色1, 颜色2, 可选的百分比)
.box-1 {
color: color.mix(#036, #d2e1dd);
}
.box-2 {
// 第3个参数,是一个百分比, 在 0-100% 之间
color: color.mix(#036, #d2e1dd, 75%)
}
编译为:
css
.box-1 {
color: #698aa2;
}
.box-2 {
color: #355f84;
}
非法组合器
以下的组合将被废弃
前导
scss
+ .error {
color: red;
}
尾随
scss
.error + {
color: red;
}
重复
scss
.error >> .log {
color: red;
}
以上语法在旧版本可用,但是不建议使用,非标准的 css 语法,增加了css的复杂性
前导和尾随组合器仍可用于嵌套, 还可用:
scss
.sidebar > {
.error {
color: red;
}
}
生成如下css
css
.sidebar > .error {
color: red;
}
除法
正确语法:
scss
@use "sass:math";
@use "sass:list";
.item3 {
$row: list.slash(span math.div(6, 2), 7);
grid-row: $row;
}
.test-1 {
width: math.div(6px, 2);
// 2是不能带单位的。
height: math.div(6, 2)(px);
border-width: math.div(6, 2)px;
}
list.slash 使用这个, 表达了, 单纯的 /
而不是除法的意思
编译为:
css
.item3 {
grid-row: span 3 / 7;
}
.test-1 {
width: 3px;
height: 3 px;
border-width: 3 px;
}
css 变量
scss
@use "sass:meta";
$accent-color: #fbbc04;
// scss变量的值带了引号
$font-family-monospace: Menlo, Consolas, "Courier New", monospace;
:root {
// css原生语法上下文,使用scss变量
--accent-color-right: #{$accent-color};
// 使用meta.inspect()函数,仍旧保留引号
--font-family-monospace: #{meta.inspect($font-family-monospace)};
}
.box-1 {
color: var(--accent-color-right);
}
.box-2 {
font-family: var(--font-family-monospace);
}
编译为:
css
:root {
--accent-color-right: #fbbc04;
--font-family-monospace: Menlo, Consolas, "Courier New", monospace;
}
.box-1 {
color: var(--accent-color-right);
}
.box-2 {
font-family: var(--font-family-monospace);
}
API导入 sass
不要这样导入
js
import sass from 'sass';
推荐
js
import * as sass from 'sass'