SCSS学习笔记

1 简介

Sass (Syntactically Awesome StyleSheets) 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

2 嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

1
2
3
4
5
6
7
8
9
10
// SCSS
.navbar {
  background-color: #333;
  .nav-item {
    color: white;
    &:hover {
      color: #ccc;
    }
  }
}

上面的 SCSS 代码会被编译成如下的 CSS：

1
2
3
4
5
6
7
8
9
10
/* CSS */
.navbar {
  background-color: #333;
}
.navbar .nav-item {
  color: white;
}
.navbar .nav-item:hover {
  color: #ccc;
}

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。

3 变量

SCSS 允许使用变量来存储常用的颜色、字体大小、间距等值，避免重复书写。变量以美元符号开头，赋值方法与 CSS 属性的写法一样。

例如：

1
2
3
4
5
6
7
8
// SCSS
$primary-color: #3498db;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;
}

4 混合指令（Mixin Directives）

混合/混入指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class。

定义混合指令使用@mixin后添加名称与样式，例如：

1
2
3
4
5
6
7
8
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引入混合样式使用@include后添加混合名称，并且可以接受参数，例如：

1
2
3
4
5
.page-title {
  @include large-text; // 引入混合样式
  padding: 4px;
  margin-top: 10px;
}

编译为：

1
2
3
4
5
6
7
8
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

有参数的情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// SCSS
@mixin border-radius($radius) { // $radius为混入指令的参数
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(10px); // 传参
  padding: 10px 20px;
  background-color: blue;
}

.primary-button {
  @include border-radius(20px); // 传参
  color: white;
}

5 继承（Inheritance）

SCSS 提供了继承功能，可以通过 @extend 继承其他选择器的样式，避免重复编写相同的样式：

1
2
3
4
5
6
7
8
9
10
// SCSS
.button {
  padding: 10px 20px;
  background-color: blue;
}

.primary-button {
  @extend .button;
  color: white;
}

特点：

  • 继承会将父选择器的所有样式直接复制到子选择器中。
  • 继承的样式将直接影响目标选择器的 CSS 输出，所有引用该父选择器的地方会共享相同的样式。
  • 继承时，不会传递参数（和混入的不同），是完全的样式继承。

6 其他特性

6.1 @use和@import

在 SCSS 中，@use 和 @import 都是引入外部文件的方式。

例如：

1
2
3
4
@use "./reset";
@use "./element-plus";
@use "./vxe-table";
@import url("./vxe-table.css");

@use 的目的是导入 SCSS 文件，并且确保它们的作用域和命名空间保持清晰。通过 @use 引入的 SCSS 文件，可以避免命名冲突和重复加载。

@import 是 SCSS 的旧式语法，用于引入 CSS 或 SCSS 文件。但是在 SCSS 中，@import 已经被标记为废弃（deprecate），官方推荐使用 @use 来替代。