在vue3中写的sass语法，应该尽量使用 sass官方推荐的写法， 有的过渡写法，应该尽量摒弃或者直接不使用，避免在大型系统中，由于升级sass 导致改动的地方比较多。
下面仅列举推荐的，过渡的语法见sass官网 breaking-changes
一元运算符 （- 和 +）
// 一元运算符 （- 和 +）
$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() 里面传递了非角度单位的参数，就会抛出错误， 无单位的
// 颜色单位
#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() 里面的 亮度 和饱和度，没有带单位，则报错
.test-1 {
background-color: hsl(120turn, 100, 50);
}
上述会报错， 最好的就是，带上单位，无论 sass 版本如何迭代，我们都可以稳定升级
.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 。
@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 不能带单位, 只能是一个数值， 未来可以带单位。
@use "sass:math";
.test-1 {
width: math.random(20)(px);
height: math.random(20)px;
}
编译为：
.test-1 {
width: 6 px;
height: 7 px;
}
$weight 单位
2个函数：color.mix color.invert, 目前是可以忽略第三个参数 $weight的单位， 但是实际应该带 % 单位，未来会严格检查，如果没有单位，会抛异常
@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%)
}
编译为：
.box-1 {
color: #698aa2;
}
.box-2 {
color: #355f84;
}
非法组合器
以下的组合将被废弃
前导
+ .error {
color: red;
}
尾随
.error + {
color: red;
}
重复
.error >> .log {
color: red;
}
以上语法在旧版本可用，但是不建议使用，非标准的 css 语法，增加了css的复杂性
前导和尾随组合器仍可用于嵌套, 还可用：
.sidebar > {
.error {
color: red;
}
}
生成如下css
.sidebar > .error {
color: red;
}
除法
正确语法：
@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 使用这个， 表达了， 单纯的 / 而不是除法的意思
编译为：
.item3 {
grid-row: span 3 / 7;
}
.test-1 {
width: 3px;
height: 3 px;
border-width: 3 px;
}
css 变量
@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);
}
编译为：
: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
不要这样导入
import sass from 'sass';
推荐
import * as sass from 'sass'
原文链接：https://juejin.cn/post/7326551966854512675 作者：知了清语
