CSS 预处理器 Sass

目录

Sass

一、Sass 是什么？

二、核心功能详解

1. 变量（Variables）

2. 嵌套（Nesting）

3. 混合宏（Mixins）

4. 继承（Inheritance）

5. 运算（Operations）

6. 函数（Functions）

7. 条件与循环

8. 模块化（Modules）

三、Sass 工具链

1. 安装与编译

2. 集成构建工具

3. VS Code 插件

四、最佳实践

五、Sass 与 Less 对比   

Sass 与 Less 核心对比

一、核心对比速览

二、语法细节对比

1. 变量定义

2. 嵌套语法

3. 混合宏（Mixins）

4. 条件控制

三、功能深度对比

1. 函数与运算

2. 继承机制

3. 模块化支持

四、编译与性能

五、社区与生态

六、迁移策略

七、选型建议

Sass 内置函数

一、颜色函数

1. 颜色调整

2. 颜色混合

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 实现动态样式生成。

---