Frontend►Sass

001-Sass基础特性

Sass 核心特性详解

变量定义与使用 ($variable)

Sass 使用 $ 符号来定义变量，方便在整个样式表中复用值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义变量
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
$border-radius: 4px;

// 使用变量
body {
  font-family: $font-stack;
  color: $primary-color;
}

.button {
  background-color: $primary-color;
  border-radius: $border-radius;
}

变量作用域：

  • 在块内定义的变量是局部变量
  • 使用 !global 标志可以定义全局变量

嵌套规则 (nesting) 与父选择器 (&)

Sass 允许嵌套 CSS 规则，使结构更清晰。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        text-decoration: none;
        
        &:hover {
          color: red;
        }
      }
    }
  }
}

父选择器 & 引用外层选择器：

1
2
3
4
5
6
7
8
.button {
  &-primary {
    background: blue;
  }
  &-secondary {
    background: gray;
  }
}

编译为：

1
2
.button-primary { background: blue; }
.button-secondary { background: gray; }

局部文件与模块化 (@use, @forward)

Sass 支持将样式拆分为多个文件，提高可维护性。

局部文件

  • 以 _ 开头的文件是局部文件，不会被编译为独立 CSS 文件
  • 例如：_variables.scss, _mixins.scss

@use 规则

从其他 Sass 文件加载 mixins、函数和变量。

1
2
3
4
5
6
7
8
9
// _variables.scss
$primary-color: #3498db;

// styles.scss
@use 'variables';

.button {
  color: variables.$primary-color;
}

可以使用 as 创建别名：

1
2
3
4
5
@use 'variables' as vars;

.button {
  color: vars.$primary-color;
}

@forward 规则

转发另一个模块的成员，使它们可以在当前文件中使用。

1
2
3
4
5
6
7
8
9
10
11
12
// _library.scss
$black: #000 !default;

// _utilities.scss
@forward 'library';

// styles.scss
@use 'utilities';

body {
  color: utilities.$black;
}

注释方式

Sass 支持两种注释方式：

  1. 单行注释 // - 不会编译到 CSS 中

    1
    2
    // 这是一个单行注释
    $color: red; // 这也是注释

  2. 多行注释 /* */ - 会编译到 CSS 中（压缩模式下除外）

    1
    2
    3
    4
    /*
     * 这是一个多行注释
     * 它会出现在编译后的CSS中
     */

  3. 强制注释 /*! */ - 即使在压缩模式下也会保留

    1
    /*! 重要版权信息必须保留 */

这些特性使 Sass 成为强大的 CSS 预处理器，大大提高了 CSS 的可维护性和开发效率。