sass的破坏性变更

在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'