外观
Sass 笔记
约 1731 字大约 6 分钟
2025-08-16
一、Sass 基础
1.1 什么是 Sass?
Sass(Syntactically Awesome Style Sheets)是一种 CSS 预处理器,它扩展了 CSS 的功能,使样式编写更高效、更易于维护。Sass 提供了变量、嵌套、混合器、函数等高级功能,最终编译成标准的 CSS 代码。
Sass 的核心优势:
- 变量支持:存储颜色、尺寸等常用值
- 嵌套语法:更直观的样式结构
- 模块化:代码组织更清晰
- 混合器(Mixins):重用样式代码
- 继承:减少重复代码
- 函数:执行复杂的样式计算
1.2 Sass 语法格式
Sass 有两种语法格式:
- SCSS (Sassy CSS):基于块的语法,使用大括号和分号,与 CSS 完全兼容
- 缩进语法 (Indented Syntax):基于缩进,无需大括号和分号
推荐使用 SCSS 格式,因为它与 CSS 完全兼容,学习曲线更平缓。
/* SCSS 示例 */
.container {
padding: 1rem;
.header {
background-color: #333;
color: white;
}
}1.3 安装与配置
安装 Sass 编译器
npm install -g sass编译 Sass 文件
# 单文件编译
sass input.scss output.css
# 监听文件变化
sass --watch input.scss output.css
# 编译整个目录
sass --watch scss:css常用编译选项:
--style=compressed:压缩输出 CSS--no-source-map:不生成 source map--update:仅当输入文件更新时重新编译
二、Sass 基础语法
2.1 变量
声明与使用变量
// 声明变量
$primary-color: #3498db;
$font-stack: Helvetica, Arial, sans-serif;
$border-radius: 4px;
// 使用变量
.button {
background-color: $primary-color;
font-family: $font-stack;
border-radius: $border-radius;
}变量特性:
- 以
$开头 - 遵循作用域规则(块级作用域)
- 可以设置默认值:
$color: #f00 !default; - 连字符
-和下划线_被视为相同($main-color和$main_color是同一个变量)
2.2 嵌套
基本嵌套
.nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}父选择器引用 &
.button {
background-color: #3498db;
&:hover {
background-color: darken(#3498db, 10%);
}
&--primary {
background-color: #2980b9;
}
}嵌套属性
.text {
font: {
family: Helvetica, Arial, sans-serif;
size: 16px;
weight: bold;
}
}2.3 注释
单行注释
// 编译后不会出现在 CSS 中
$primary-color: #3498db;多行注释
/*
* 编译后会出现在 CSS 中
* 通常用于文件头部说明
*/三、Sass 数据类型
3.1 字符串
字符串操作
$font-family: "Helvetica Neue", Arial, sans-serif;
$icon: "fa fa-";
.button {
font-family: $font-family;
&::before {
content: "#{$icon}check";
}
}字符串函数
// 将带引号的字符串转换为不带引号的
$unquoted: str-slice("Helvetica Neue", 1, 9); // "Helvetica"
// 将不带引号的字符串转换为带引号的
$quoted: quote(sans-serif); // "sans-serif"3.2 数字
基本运算
$sidebar-width: 200px;
$content-width: 100% - $sidebar-width;
.container {
width: $content-width;
}
// 除法注意事项
$width: 10px / 2; // 5px
$font-size: (10px / 2); // 5px单位运算
// Sass 会自动进行单位转换
$base: 10px;
$double: $base * 2; // 20px
// 复杂单位运算
$velocity: 10px / 1s; // 10px/s3.3 颜色
颜色表示
$primary: #3498db;
$secondary: rgb(46, 204, 113);
$accent: hsl(300, 60%, 70%);
$transparent: rgba(0, 0, 0, 0.5);常用颜色函数
$primary: #3498db;
.button {
background-color: $primary;
border-color: darken($primary, 10%);
color: lighten($primary, 20%);
}
.alert {
background-color: adjust-hue($primary, 30deg);
color: saturate($primary, 20%);
}3.4 列表
列表操作
$breakpoints: 320px, 480px, 768px, 992px;
// 访问列表元素
$mobile: nth($breakpoints, 1); // 320px
// 创建响应式工具类
@each $breakpoint in $breakpoints {
.hidden-#{nth($breakpoint, 1)} {
@media (max-width: $breakpoint) {
display: none;
}
}
}常用列表函数
$colors: red, green, blue;
// 添加元素
$extended: append($colors, yellow); // red, green, blue, yellow
// 获取长度
$count: length($colors); // 3
// 连接列表
$combined: join($colors, (orange, purple)); // red, green, blue, orange, purple四、模块系统
4.1 @use 指令
基本用法
// variables.scss
$primary-color: #3498db;
$font-stack: Helvetica, Arial, sans-serif;
// components/button.scss
@use "../variables";
.button {
background-color: variables.$primary-color;
font-family: variables.$font-stack;
}自定义命名空间
@use "variables" as v;
.button {
background-color: v.$primary-color;
}导入所有成员
@use "variables" as *;
.button {
background-color: $primary-color;
}4.2 @forward 指令
基本转发
// _config.scss
$primary-color: #3498db !default;
$font-stack: Helvetica, Arial, sans-serif !default;
// _components.scss
@forward "config";
@forward "button";
@forward "card";配置转发模块
// _components.scss
@forward "config" with (
$primary-color: #2980b9,
$font-stack: "Open Sans", sans-serif
);4.3 模块最佳实践
- 使用
_前缀命名部分文件(partials),避免被单独编译 - 优先使用
@use代替@import - 为模块创建统一入口文件(如
_index.scss) - 使用
!default标志提供可配置的默认值
五、控制指令
5.1 @if/@else
条件判断
$theme: dark;
.card {
@if $theme == dark {
background-color: #333;
color: white;
} @else if $theme == light {
background-color: white;
color: #333;
} @else {
background-color: #f5f5f5;
}
}5.2 @each
遍历列表
$colors: (
success: #27ae60,
warning: #f39c12,
danger: #e74c3c
);
@each $name, $color in $colors {
.alert-#{$name} {
background-color: $color;
border-color: darken($color, 10%);
a {
color: lighten($color, 20%);
}
}
}遍历地图
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
@each $size, $width in $breakpoints {
@media (min-width: $width) {
.container-#{$size} {
max-width: $width;
}
}
}六、混合器(Mixins)
6.1 基本用法
定义和使用混合器
// 定义混合器
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
// 使用混合器
.container {
@include center;
}
// 带参数的混合器
@mixin responsive-font($min: 16px, $max: 20px) {
font-size: $min;
@media (min-width: 1200px) {
font-size: $max;
}
}
h1 {
@include responsive-font(24px, 32px);
}6.2 高级混合器
默认参数值
@mixin border-radius($radius: 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
.button {
@include border-radius; // 使用默认值 4px
}关键字参数
@mixin avatar($size: 100px, $border-width: 2px) {
width: $size;
height: $size;
border: $border-width solid #ccc;
border-radius: 50%;
}
.user-avatar {
@include avatar($border-width: 3px, $size: 150px);
}6.3 @content 指令
传递样式块
@mixin responsive($property, $sm, $md, $lg) {
#{$property}: $sm;
@media (min-width: 768px) {
#{$property}: $md;
}
@media (min-width: 992px) {
#{$property}: $lg;
}
}
.container {
@include responsive(width, 100%, 90%, 80%);
}创建可自定义的混合器
@mixin hover-effect {
transition: all 0.3s ease;
&:hover {
@content;
}
}
.button {
@include hover-effect {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
}七、继承
7.1 @extend 基本用法
基本继承
.message {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
}
.success {
@extend .message;
background-color: #d4edda;
border-color: #c3e6cb;
}
.error {
@extend .message;
background-color: #f8d7da;
border-color: #f5c6cb;
}编译结果
.message, .success, .error {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
}
.success {
background-color: #d4edda;
border-color: #c3e6cb;
}
.error {
background-color: #f8d7da;
border-color: #f5c6cb;
}7.2 占位符选择器
使用占位符避免无用代码
%message {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
}
.success {
@extend %message;
background-color: #d4edda;
border-color: #c3e6cb;
}
.error {
@extend %message;
background-color: #f8d7da;
border-color: #f5c6cb;
}编译结果(不包含 %message)
.success, .error {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
}
.success {
background-color: #d4edda;
border-color: #c3e6cb;
}
.error {
background-color: #f8d7da;
border-color: #f5c6cb;
}八、常用内置函数
8.1 颜色函数
亮度调整
$primary: #3498db;
.button {
background-color: $primary;
&:hover {
background-color: darken($primary, 10%);
}
&:active {
background-color: lighten($primary, 10%);
}
}透明度调整
$primary: #3498db;
.alert {
background-color: rgba($primary, 0.1);
border-color: rgba($primary, 0.3);
}混合颜色
$primary: #3498db;
$secondary: #2ecc71;
.highlight {
background-color: mix($primary, $secondary, 50%);
}8.2 列表函数
访问列表元素
$breakpoints: 320px, 480px, 768px, 992px;
.mobile {
max-width: nth($breakpoints, 1); // 320px
}检查元素是否存在
$colors: red, green, blue;
.alert {
@if index($colors, red) {
border-color: red;
}
}8.3 字符串函数
字符串拼接
$prefix: "fa-";
$icon: "check";
.icon {
&::before {
content: quote($prefix + $icon);
}
}字符串切片
$font: "Helvetica Neue";
h1 {
font-family: str-slice($font, 1, 9); // "Helvetica"
}8.4 数字函数
四舍五入
$width: 10.6px;
$rounded: round($width); // 11px获取绝对值
$value: -10;
$abs: abs($value); // 10