sass的破坏性变更

在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'
相关推荐
黎金安5 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=6 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程8 小时前
【前端基础】CSS基础
前端·css
Justinc.9 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge9 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_9 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189119 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
我要洋人死12 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚1111 天前
css实现div被图片撑开
前端·css
@蒙面大虾1 天前
CSS综合练习——懒羊羊网页设计
前端·css