SCSS 学习笔记

指令

@mixin 和 @include

@mixin 表示接下来的代码可以通过 @include 混入到其他代码片段中，例如：

@mixin reset-list {
    list-style: none;
}

@mixin h-list {
    @include reset-list;
    list {
        display: inline;
    }
}

nav ul {
    @include h-list;
}

将生成：

nav ul {
  list-style: none;
}

nav ul list {
  display: inline;
}

@mixin 可以带参数与设置默认值，如：

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}

将生成：

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

@use

通过 @use 指令加载定义在其他 .scss 文件中的 minix, functions, variables。通过 @use 引入到其他 SCSS 文件中的 SCSS 就叫做模块。

SCSS 的内置模块

通过如 @use "sass:color" 的形式引入 SCSS 内置模块。

@function

@function 定义函数。