My Knowledge Base

外观

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/s

3.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