CSS 预处理器：Sass 升级版本 浅学

Sass (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器，它扩展了 CSS 的功能，使样式表的编写更加高效、灵活和可维护。让我们先简单回顾的sass的一些基础知识：

Sass 简介

它提供了 CSS 不具备的许多高级功能：

• 变量：可以存储颜色、字体等值

• 嵌套规则：更清晰地组织样式结构

• 混合(Mixins)：可重用的样式块

• 继承：通过 @extend 共享样式

• 运算：在样式表中进行数学计算

• 函数：自定义或使用内置函数处理样式值

• 模块化：将样式分割为多个文件

2. Sass 的两种语法

Sass 支持两种语法格式：

SCSS 语法 (.scss 文件)

• 完全兼容 CSS 语法

• 使用花括号 {} 和分号 ;

• 文件扩展名为 .scss

$primary-color: #333;body {color: $primary-color;.container {width: 100%;}
}

缩进语法 (.sass 文件)

• 更简洁，不使用花括号和分号

• 使用缩进来表示嵌套关系

• 文件扩展名为 .sass

$primary-color: #333bodycolor: $primary-color.containerwidth: 100%

3. Sass 的主要特性

变量

$font-stack: Helvetica, sans-serif
$primary-color: #333bodyfont: 100% $font-stackcolor: $primary-color

嵌套

nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }
}

混合(Mixins)

@mixin transform($property) {-webkit-transform: $property;-ms-transform: $property;transform: $property;
}.box { @include transform(rotate(30deg)); }

继承

%message-shared {border: 1px solid #ccc;padding: 10px;
}.success {@extend %message-shared;border-color: green;
}

运算

.container {width: 100% / 3;height: 100px + 50px;
}

Sass 最新版本主要改动汇总

1. 模块系统 (@use 取代 @import)

核心变化：

• @import 被标记为已弃用，推荐使用 @use 和 @forward

• 所有内置函数现在需要通过模块访问

示例：

// 旧方式
@import "styles/mixins";
$color: hsl(0, 100%, 50%);// 新方式
@use "styles/mixins";
@use "sass:color";
$color: color.hsl(0, 100%, 50%);

2. 内置模块划分

Sass 将功能划分为多个内置模块：

模块名	包含功能
sass:math	数学计算相关函数
sass:color	颜色处理函数
sass:string	字符串处理函数
sass:list	列表处理函数
sass:map	映射(map)处理函数
sass:meta	元编程功能

3. 颜色函数语法变化

• 旧的全局颜色函数如 rgb(), rgba(), hsl(), hsla() 必须通过 sass:color 模块调用

• 新的颜色语法更严格：

  // 旧语法（已弃用）
  color: rgba(255, 0, 0, 0.5);// 新语法
  @use "sass:color";
  color: color.rgba(255, 0, 0, 0.5);

4. 数学函数变化

• 数学函数如 percentage(), round(), ceil(), floor() 等现在属于 sass:math 模块

• 新增 math.div() 替代 / 运算符进行除法运算（因为 / 在CSS中保留为分隔符）

@use "sass:math";// 旧语法
width: 100px / 2;// 新语法
width: math.div(100px, 2);

5. 列表和映射函数变化

所有列表和映射函数现在需要通过模块调用：

@use "sass:list";
@use "sass:map";// 旧语法
nth($list, 1);
map-get($map, $key);// 新语法
list.nth($list, 1);
map.get($map, $key);

6. 其他重要变化

1. 插值语法更严格：#{} 插值在某些上下文中的行为更可预测

2. 单位计算更精确：数学运算中的单位处理更符合CSS规范

3. 移除旧特性：如 = 语法定义mixin已完全移除

4. 性能改进：每个版本都有显著的性能提升

迁移建议

1. 使用Sass迁移工具：

   npm install -g sass-migrator
   sass-migrator module --migrate-deps <your-stylesheets-dir>

2. 逐步迁移策略：

   • 先替换 @import 为 @use

   • 然后更新函数调用为模块化版本

   • 最后处理数学运算和颜色语法

3. 检查兼容性：使用Sass的 --quiet-deps 选项识别兼容性问题