CSS 预处理器 Sass

目录

Sass

[一、Sass 是什么？](#一、Sass 是什么？)

二、核心功能详解

[1. 变量（Variables）](#1. 变量（Variables）)

[2. 嵌套（Nesting）](#2. 嵌套（Nesting）)

[3. 混合宏（Mixins）](#3. 混合宏（Mixins）)

[4. 继承（Inheritance）](#4. 继承（Inheritance）)

[5. 运算（Operations）](#5. 运算（Operations）)

[6. 函数（Functions）](#6. 函数（Functions）)

[7. 条件与循环](#7. 条件与循环)

[8. 模块化（Modules）](#8. 模块化（Modules）)

[三、Sass 工具链](#三、Sass 工具链)

[1. 安装与编译](#1. 安装与编译)

[2. 集成构建工具](#2. 集成构建工具)

[3. VS Code 插件](#3. VS Code 插件)

四、最佳实践

[五、Sass 与 Less 对比](#五、Sass 与 Less 对比)

[Sass 与 Less 核心对比](#Sass 与 Less 核心对比)

一、核心对比速览

二、语法细节对比

[1. 变量定义](#1. 变量定义)

[2. 嵌套语法](#2. 嵌套语法)

[3. 混合宏（Mixins）](#3. 混合宏（Mixins）)

[4. 条件控制](#4. 条件控制)

三、功能深度对比

[1. 函数与运算](#1. 函数与运算)

[2. 继承机制](#2. 继承机制)

[3. 模块化支持](#3. 模块化支持)

四、编译与性能

五、社区与生态

六、迁移策略

七、选型建议

[Sass 内置函数](#Sass 内置函数)

一、颜色函数

[1. 颜色调整](#1. 颜色调整)

[2. 颜色混合](#2. 颜色混合)

[3. 颜色通道提取](#3. 颜色通道提取)

二、数值函数

三、字符串函数

四、列表函数

五、映射函数（Map）

六、其他实用函数

七、实战示例

八、总结

---

Sass

一、Sass 是什么？

Sass （Syntactically Awesome Style Sheets）是一种 CSS 预处理器，通过增强 CSS 的语法（如变量、嵌套、混合宏等）提升代码的可维护性和开发效率。Sass 最终会编译为标准的 CSS，兼容所有浏览器。

• 两种语法：

  • SCSS （.scss）：兼容 CSS 语法，使用 {} 和 ;。

  • Sass （.sass）：缩进语法，无 {} 和 ;（较少用）。

---

二、核心功能详解

1. 变量（Variables）

• 定义变量：存储颜色、尺寸、字体等重复使用的值。

  $primary-color: #3498db;
  $font-stack: Helvetica, sans-serif;

• 使用变量：

  body {
    color: $primary-color;
    font-family: $font-stack;
  }

2. 嵌套（Nesting）

• 规则嵌套：简化层级结构。

  .nav {
    padding: 1rem;
    ul {
      margin: 0;
      li {
        display: inline-block;
        a {
          color: $primary-color;
        }
      }
    }
  }

• 父选择器引用 ：使用 & 引用父级。

  .button {
    &:hover { background: darken($primary-color, 10%); }
    &-large { padding: 20px; }
  }

3. 混合宏（Mixins）

• 定义可复用代码块：

  @mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

• 调用混合宏：

  .container {
    @include flex-center;
  }

• 带参数的混合宏：

  @mixin box-shadow($x, $y, $blur, $color) {
    box-shadow: $x $y $blur $color;
  }
  .card {
    @include box-shadow(2px, 2px, 10px, rgba(0,0,0,0.1));
  }

4. 继承（Inheritance）

• 代码复用 ：通过 @extend 共享样式。

  %button-base {
    padding: 10px 20px;
    border-radius: 4px;
  }
  .primary-button {
    @extend %button-base;
    background: $primary-color;
  }
  .secondary-button {
    @extend %button-base;
    background: #2ecc71;
  }

5. 运算（Operations）

• 数学运算 ：支持 +, -, *, /, %。

  $container-width: 1200px;
  .sidebar {
    width: $container-width / 4;
  }

6. 函数（Functions）

• 内置函数：颜色处理、字符串操作等。

  .dark-bg {
    background: darken($primary-color, 20%);
  }

• 自定义函数：

  @function em($px, $base: 16px) {
    @return ($px / $base) * 1em;
  }
  h1 {
    font-size: em(32px); // 2em
  }

7. 条件与循环

• @if / @else：

  @mixin theme($dark: false) {
    @if $dark {
      background: #333;
      color: white;
    } @else {
      background: white;
      color: #333;
    }
  }

• @for 循环：

  @for $i from 1 through 5 {
    .col-#{$i} {
      width: 20% * $i;
    }
  }

• @each 遍历：

  $colors: red, green, blue;
  @each $color in $colors {
    .icon-#{$color} {
      fill: $color;
    }
  }

• @while 循环（较少用）：

  $i: 1;
  @while $i < 6 {
    .item-#{$i} { width: 20px * $i; }
    $i: $i + 1;
  }

8. 模块化（Modules）

• 分文件管理 ：通过 @use 或 @import 导入模块。

  // _variables.scss
  $primary-color: #3498db;
  
  // main.scss
  @use 'variables' as vars;
  .header {
    color: vars.$primary-color;
  }

---

三、Sass 工具链

1. 安装与编译

• 安装 Sass（需 Node.js）：

  npm install -g sass

• 命令行编译：

  sass input.scss output.css
  sass --watch input.scss:output.css  # 监听文件变化

2. 集成构建工具

• Webpack ：使用 sass-loader。

  // webpack.config.js
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }

• Gulp ：使用 gulp-sass。

  const gulp = require('gulp');
  const sass = require('gulp-sass')(require('sass'));
  gulp.task('sass', () => {
    return gulp.src('src/scss/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('dist/css'));
  });

3. VS Code 插件

• Live Sass Compiler ：实时编译 .scss 文件为 .css。

---

四、最佳实践

1. 变量命名规范 ：使用语义化命名（如 $brand-primary）。

2. 模块化拆分 ：按功能分文件（如 _variables.scss、_mixins.scss）。

3. 避免深层嵌套：嵌套层级不超过 3 层，防止选择器冗余。

4. 慎用 @extend：过度继承可能导致 CSS 文件体积膨胀。

5. 注释与文档 ：使用 // 或 /* */ 标注关键逻辑。

---

五、Sass 与 Less 对比

特性	Sass	Less
语法	支持 SCSS 和缩进语法	类似 CSS，使用 @ 符号
功能复杂度	更强大（条件、循环、自定义函数）	较简单
社区生态	更广泛（Bootstrap 5+ 使用 Sass）	逐渐被 Sass 替代
编译速度	较快（Dart Sass）	较慢

---

Sass 与 Less 核心对比

一、核心对比速览

特性	Sass/SCSS	Less
语法	支持 .scss（类CSS）和 .sass（缩进语法）	类似 CSS，使用 @ 符号定义变量等
变量符	$	@
混入（Mixins）	支持参数传递、内容块（@content）	支持参数传递，功能相对简单
条件/循环	支持 @if、@for、@each、@while	支持条件守卫（Guards）、循环功能较弱
函数扩展	支持自定义函数，内置函数库丰富	内置函数较少，不支持自定义函数
继承	通过 @extend 实现	通过混入模拟继承，无原生继承语法
模块化	通过 @use、@forward 管理依赖（推荐）	通过 @import 导入（可能重复代码）
编译方式	Dart Sass（快）、LibSass（弃用）	基于 JavaScript（速度较慢）
社区生态	更广泛（Bootstrap 5+、主流框架优先支持）	逐渐被 Sass 替代，维护更新较少
浏览器编译	不支持	支持（通过 <script> 引入 less.js）

---

二、语法细节对比

1. 变量定义

• Sass：

  $primary-color: #3498db;
  $font-size: 16px;

• Less：

  @primary-color: #3498db;
  @font-size: 16px;

2. 嵌套语法

• Sass（支持属性嵌套）：

  .box {
    border: {
      width: 1px;
      style: solid;
      color: #ddd;
    }
  }

• Less（仅支持选择器嵌套）：

  .box {
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
  }

3. 混合宏（Mixins）

• Sass （支持内容块 @content）：

  @mixin media($width) {
    @media (min-width: $width) {
      @content;
    }
  }
  .container {
    @include media(768px) {
      padding: 20px;
    }
  }

• Less（无内容块支持）：

  .mixin(@color) {
    color: @color;
  }
  .text {
    .mixin(#333);
  }

4. 条件控制

• Sass（完整逻辑控制）：

  @if lightness($color) > 50% {
    background: black;
  } @else {
    background: white;
  }

• Less（通过守卫条件）：

  .mixin(@color) when (lightness(@color) > 50%) {
    background: black;
  }

---

三、功能深度对比

1. 函数与运算

• Sass ：

  支持复杂数学运算和自定义函数：

  @function em($px, $base: 16px) {
    @return ($px / $base) * 1em;
  }
  .title { font-size: em(24px); } // 1.5em

• Less ：

  仅支持内置函数（如 lighten()、darken()），无法自定义函数。

2. 继承机制

• Sass（高效继承）：

  %button-base { padding: 10px; }
  .primary-btn { @extend %button-base; }

  编译后合并相同样式，减少 CSS 体积。

• Less（通过混入模拟）：

  .button-base() { padding: 10px; }
  .primary-btn { .button-base(); }

  编译后重复代码，体积较大。

3. 模块化支持

• Sass（现代模块系统）：

  // _variables.scss
  $primary-color: #3498db;
  
  // main.scss
  @use 'variables' as vars;
  .header { color: vars.$primary-color; }

• Less（传统导入）：

  // variables.less
  @primary-color: #3498db;
  
  // main.less
  @import "variables";
  .header { color: @primary-color; }

---

四、编译与性能

维度	Sass	Less
编译器	Dart Sass（官方推荐，速度快）	less.js（基于 JavaScript）
编译速度	快（Dart 引擎优化）	较慢（大型项目明显）
实时编译	需工具（如 sass --watch、构建工具）	浏览器端可实时编译
生产环境	必须预编译	可预编译或浏览器端运行

---

五、社区与生态

生态项	Sass	Less
主流框架	Bootstrap 5+、Vuetify、Material-UI 等优先支持	Bootstrap 3~4 主要支持
插件工具	Webpack、Gulp、Vite 深度集成	支持但更新较少
学习资源	文档完善，社区活跃	资源较少，更新滞后
NPM 下载量	每周约 2500 万次（2023）	每周约 700 万次（2023）

---

六、迁移策略

• 从 Less 迁移到 Sass：

  1. 重命名文件为 .scss。

  2. 替换语法（如 @ → $）。

  3. 逐步替换 Less 特有功能（如 Guards → @if）。

  4. 使用工具转换（如 less2sass）。

---

七、选型建议

选择 Sass 的场景

• 项目复杂，需要高级功能（条件、循环、自定义函数）。

• 团队协作，需模块化管理和样式复用。

• 长期维护，依赖活跃社区和工具链支持。

• 使用现代框架（如 React、Vue）和组件库（如 Bootstrap 5+）。

选择 Less 的场景

• 小型项目或快速原型开发，无需复杂逻辑。

• 遗留项目维护（如旧版 Bootstrap）。

• 需要浏览器端实时编译（如简单静态页面）。

• Sass ：功能全面、性能优越、生态完善，现代开发首选。

• Less ：简单易学、浏览器兼容性佳，适合轻量级场景。

根据项目需求和团队熟悉度选择，优先推荐 Sass 应对未来挑战。

---

Sass内置函数

---

一、颜色函数

1. 颜色调整

函数	作用	示例
lighten($color, $amount)	增加颜色亮度（0%~100%）	lighten(#336699, 20%) → #6699cc
darken($color, $amount)	降低颜色亮度（0%~100%）	darken(#336699, 10%) → #1a4d80
saturate($color, $amount)	增加饱和度（0%~100%）	saturate(#336699, 20%) → #2b5c8c
desaturate($color, $amount)	降低饱和度	desaturate(#ff0000, 50%) → #808080
opacify($color, $amount)	增加不透明度（0~1）	opacify(rgba(255,0,0,0.5), 0.2) → rgba(255,0,0,0.7)
transparentize($color, $amount)	降低不透明度	transparentize(#ff0000, 0.3) → rgba(255,0,0,0.7)

2. 颜色混合

函数	作用	示例
mix($color1, $color2, $weight)	混合两种颜色（权重 0%~100%）	mix(red, blue, 50%) → #800080（紫色）
grayscale($color)	转为灰度颜色	grayscale(#ff0000) → #808080

3. 颜色通道提取

函数	作用	示例
red($color)	提取红色通道值（0~255）	red(#ff3366) → 255
green($color)	提取绿色通道值	green(#ff3366) → 51
blue($color)	提取蓝色通道值	blue(#ff3366) → 102
alpha($color)	提取透明度（0~1）	alpha(rgba(255,0,0,0.5)) → 0.5

---

二、数值函数

函数	作用	示例
percentage($number)	转为百分比（0.5 → 50%）	percentage(0.3) → 30%
round($number)	四舍五入取整	round(3.7) → 4
ceil($number)	向上取整	ceil(3.2) → 4
floor($number)	向下取整	floor(3.7) → 3
abs($number)	取绝对值	abs(-10) → 10
min($numbers...)	取最小值	min(5, 3, 8) → 3
max($numbers...)	取最大值	max(5, 3, 8) → 8
random($limit?)	生成随机数（0~1 或 0~$limit）	random(100) → 42

---

三、字符串函数

函数	作用	示例
quote($string)	添加引号	quote(text) → "text"
unquote($string)	移除引号	unquote("text") → text
to-upper-case($string)	转为大写	to-upper-case(abc) → ABC
to-lower-case($string)	转为小写	to-lower-case(ABC) → abc
str-length($string)	获取字符串长度	str-length("hello") → 5
str-index($string, $substring)	查找子串位置	str-index("hello", "e") → 2

---

四、列表函数

函数	作用	示例
length($list)	获取列表长度	length(1px 2px 3px) → 3
nth($list, $n)	获取第 $n 个元素	nth(a b c, 2) → b
join($list1, $list2, $separator)	合并列表	join(a b, c d) → a b c d
append($list, $value, $separator)	追加元素到列表	append(a b, c) → a b c
index($list, $value)	查找元素位置	index(a b c, b) → 2

---

五、映射函数（Map）

函数	作用	示例
map-get($map, $key)	根据键获取值	map-get((a:1, b:2), a) → 1
map-merge($map1, $map2)	合并两个映射	map-merge((a:1), (b:2)) → (a:1, b:2)
map-keys($map)	获取所有键的列表	map-keys((a:1, b:2)) → a, b
map-values($map)	获取所有值的列表	map-values((a:1, b:2)) → 1, 2

---

六、其他实用函数

函数	作用	示例
if($condition, $if-true, $if-false)	条件判断	if(true, 10px, 20px) → 10px
unique-id()	生成唯一 ID（如 u0daxx）	unique-id() → u0daxx
inspect($value)	返回值的字符串表示形式	inspect(10px) → 10px

---

七、实战示例

1. 动态生成颜色渐变

$base-color: #3498db;
$steps: 5;

@for $i from 1 through $steps {
  .color-step-#{$i} {
    background: lighten($base-color, $i * 10%);
  }
}

2. 响应式断点管理

$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
);

@mixin respond-to($key) {
  $width: map-get($breakpoints, $key);
  @media (min-width: $width) {
    @content;
  }
}

.container {
  @include respond-to(medium) {
    padding: 20px;
  }
}

---

八、总结

• 颜色处理 ：lighten、darken、mix 快速生成配色方案。

• 数值计算 ：percentage、round 简化布局计算。

• 字符串操作 ：to-upper-case、str-index 增强动态内容处理能力。

• 列表与映射 ：map-get、nth 管理复杂数据结构。

• 条件与循环 ：结合 @if、@for 实现动态样式生成。

---