CSS 预处理器 Sass

旺代

于 2025-05-03 18:08:08 发布

阅读量1.1k

点赞数 38

分类专栏： HTML+CSS 文章标签：开发语言 sass

本文链接：https://blog.csdn.net/2301_82023822/article/details/147621055

版权

HTML+CSS 专栏收录该内容

19 篇文章

订阅专栏

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。

四、最佳实践

变量命名规范：使用语义化命名（如 $brand-primary）。
模块化拆分：按功能分文件（如 _variables.scss、_mixins.scss）。
避免深层嵌套：嵌套层级不超过 3 层，防止选择器冗余。
慎用 @extend：过度继承可能导致 CSS 文件体积膨胀。
注释与文档：使用 // 或 /* */ 标注关键逻辑。

五、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;
  }
}