当前位置：首页 > news >正文

Sass：CSS 预处理器

news 2025/9/24 6:42:01

Sass 介绍

Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 基础上增加变量、嵌套、循环、函数等功能，解决 CSS 代码冗余、可维护性差的问题，最终需编译为浏览器可识别的 CSS。

1. Sass 基础：环境搭建与文件类型

（1）环境搭建（VS Code）

安装插件 Live Sass Compiler（实时编译 Sass 为 CSS）；
创建 .scss 文件（Sass 推荐格式，兼容 CSS 语法，需大括号和分号；另一种 .sass 格式无大括号，靠缩进，兼容性差）；
点击状态栏「Watch Sass」开始监听，自动生成 .css 和 .css.map（映射文件，用于浏览器调试定位 Sass 源文件）。

（2）自定义编译路径

默认编译后的 CSS 与 Sass 同目录，可通过配置修改路径（如生成到 css 文件夹）：

打开 设置 → 搜索 Live Sass Compile: Settings → 编辑 Formats；
替换配置为：

json

"liveSassCompile.settings.formats": [{"format": "expanded", // 编译格式：expanded（展开）、compressed（压缩）"extensionName": ".css","savePath": "~./css/" // 编译后路径（~ 表示当前 Sass 文件所在目录）}
]

2. Sass 核心语法

（1）嵌套（解决选择器冗余）

支持选择器嵌套和属性嵌套，减少重复代码，结构更清晰。

① 选择器嵌套

scss

// Sass 代码
.nav {width: 100%;height: 50px;background: #333;// 子代选择器（.nav > .link）> .link {color: #fff;text-decoration: none;// 伪类嵌套（.nav > .link:hover）&:hover {color: #ff0;}}// 兄弟选择器（.nav + .header）+ .header {margin-top: 10px;}
}// 编译后的 CSS 代码
.nav {width: 100%;height: 50px;background: #333;
}
.nav > .link {color: #fff;text-decoration: none;
}
.nav > .link:hover {color: #ff0;
}
.nav + .header {margin-top: 10px;
}

注意：& 表示当前父选择器，避免嵌套后生成错误选择器（如 .nav .link:hover 与 .nav .link :hover 不同）。

② 属性嵌套

针对复合属性（如 font、margin、border），可嵌套子属性：

scss

// Sass 代码
.box {font: {size: 16px;weight: bold;family: "Microsoft YaHei";}margin: {top: 10px;left: auto;}
}// 编译后的 CSS 代码
.box {font-size: 16px;font-weight: bold;font-family: "Microsoft YaHei";margin-top: 10px;margin-left: auto;
}

（2）变量（统一样式管理）

用 $ 定义变量，可存储颜色、尺寸、路径等，便于全局修改（如主题色切换）。

基本用法

scss

// 定义变量（全局变量：定义在选择器外）
$theme-color: #ff4400; // 主题色
$base-font-size: 16px; // 基础字体大小
$bg-url: "../images/bg.jpg"; // 背景图路径// 使用变量
body {font-size: $base-font-size;background: $theme-color url($bg-url) no-repeat;
}.button {background: $theme-color;&:hover {background: darken($theme-color, 10%); // darken 函数：加深颜色 10%}
}

变量作用域

全局变量：定义在选择器、函数外，全文件可用；
局部变量：定义在选择器内，仅在该选择器内可用；
用 !global 可将局部变量转为全局变量（慎用）：

scss

$color: #000; // 全局变量.box {$color: #ff0 !global; // 转为全局变量color: $color; // 局部使用：#ff0
}.text {color: $color; // 全局使用：#ff0（被局部变量修改）
}

（3）循环（批量生成样式）

Sass 支持 @for、@each、@while 三种循环，适合批量生成重复样式（如栅格、列表项）。

① `@for` 循环（固定次数）

两种格式：

@for $i from 开始值 through 结束值：包含结束值；
@for $i from 开始值 to 结束值：不包含结束值。

示例：生成 1-5 号字体大小类：

scss

// @for 循环：生成 .text-1 到 .text-5
@for $i from 1 through 5 {.text-#{$i} { // #{} 为插值语法，将变量嵌入选择器/属性font-size: 12px + $i * 2;}
}// 编译后的 CSS 代码
.text-1 { font-size: 14px; }
.text-2 { font-size: 16px; }
.text-3 { font-size: 18px; }
.text-4 { font-size: 20px; }
.text-5 { font-size: 22px; }

② `@each` 循环（遍历列表）

遍历列表中的每个值，适合非连续数据：

scss

// 定义列表（颜色和对应的类名）
$color-list: (primary: #ff4400, success: #00c853, danger: #f44336);// @each 遍历列表
@each $name, $color in $color-list {.btn-#{$name} {background: $color;color: #fff;padding: 4px 8px;border: none;}
}// 编译后的 CSS 代码
.btn-primary { background: #ff4400; color: #fff; padding: 4px 8px; border: none; }
.btn-success { background: #00c853; color: #fff; padding: 4px 8px; border: none; }
.btn-danger { background: #f44336; color: #fff; padding: 4px 8px; border: none; }

③ `@while` 循环（条件循环）

满足条件时持续循环，需手动更新变量避免死循环：

scss

// @while 循环：生成 .margin-1 到 .margin-4
$num: 1;
@while $num <= 4 {.margin-#{$num} {margin: $num * 5px;}$num: $num + 1; // 手动更新变量
}// 编译后的 CSS 代码
.margin-1 { margin: 5px; }
.margin-2 { margin: 10px; }
.margin-3 { margin: 15px; }
.margin-4 { margin: 20px; }

（4）条件判断（动态样式）

用 @if、@else if、@else 实现条件判断，根据变量值生成不同样式；也支持三元运算符 if(条件, 真结果, 假结果)。

① `@if` 条件判断

示例：根据变量生成不同颜色：

scss

$theme: "dark"; // 主题：light/dark.body {@if $theme == "light" {background: #fff;color: #333;} @else if $theme == "dark" {background: #333;color: #fff;} @else {background: #f5f5f5;color: #666;}
}// 编译后的 CSS 代码（$theme 为 dark）
.body {background: #333;color: #fff;
}

② 三元运算符

简化条件判断，适合简单场景：

scss

$is-large: true;.box {width: if($is-large, 300px, 200px); // 条件为真时 300px，否则 200pxheight: if($is-large, 200px, 150px);
}// 编译后的 CSS 代码
.box {width: 300px;height: 200px;
}

（5）函数（复用计算逻辑）

用 @function 定义自定义函数，实现样式计算复用（如栅格宽度、颜色调整）。

示例：定义计算栅格宽度的函数

scss

// 定义函数：计算栅格宽度（总宽度 - 间距）/ 列数
@function grid-width($total-width, $columns, $gutter) {@return ($total-width - ($columns - 1) * $gutter) / $columns;
}// 使用函数：生成 2 列、3 列栅格
.container {width: 1200px;margin: 0 auto;
}.col-2 {width: grid-width(1200px, 2, 20px); // 总宽1200，2列，间距20pxfloat: left;margin-right: 20px;
}.col-3 {width: grid-width(1200px, 3, 20px); // 总宽1200，3列，间距20pxfloat: left;margin-right: 20px;
}// 编译后的 CSS 代码
.container {width: 1200px;margin: 0 auto;
}.col-2 {width: 590px; /* (1200 - 1*20)/2 = 590 */float: left;margin-right: 20px;
}.col-3 {width: 393.33333px; /* (1200 - 2*20)/3 ≈ 393.33 */float: left;margin-right: 20px;
}

Sass 还提供大量内置函数，如颜色处理（darken 加深、lighten 变浅、rgba 设置透明度）、数值计算（ceil 向上取整、floor 向下取整）等，可直接调用：

scss

.box {background: darken(#ff4400, 10%); // 主题色加深10%color: rgba(#fff, 0.8); // 白色设置80%透明度width: ceil(300.2px); // 宽度向上取整为301px
}

3. Sass 实用技巧与注意事项

（1）注释规则

单行注释：// 注释内容，编译后不会保留在 CSS 中，适合开发备注；
多行注释：/* 注释内容 */，编译后会保留在 CSS 中，适合对外说明（如版权信息）。

scss

// 这是单行注释，编译后会消失（开发备注）
/* 
这是多行注释，
编译后会保留在 CSS 中（对外说明）
*/
body {margin: 0;
}

（2）避免过度嵌套

嵌套虽能简化选择器，但嵌套层级过深（如超过 3 层）会生成冗余 CSS（如 .header .nav .link .icon），导致选择器权重过高、性能下降。建议嵌套层级控制在 2-3 层内。

（3）模块化拆分

大型项目中，可将 Sass 按功能拆分到不同文件（如 _variables.scss 变量、_mixin.scss 混合、_grid.scss 栅格），再通过 @import 合并，提升可维护性。

注意：拆分的文件建议以 _ 开头（如 _variables.scss），表示 “局部文件”，编译时不会单独生成 CSS 文件，仅作为导入使用。

scss

// main.scss（主文件）
@import "./_variables"; // 导入变量文件（无需写 .scss 后缀）
@import "./_grid"; // 导入栅格文件body {font-size: $base-font-size; // 使用 _variables.scss 中的变量
}

查看全文

http://www.dtcms.com/a/397962.html