sass 速记

振作精神，努力更新！

先定个小目标，每周更新3篇内容！

本周：2022 - 06 - 13 ~ 2022 - 06 - 19 （ 第二篇 ）

sass 安装

npm install -g sass
sass --version
sass test.scss
sass test.scss test.css

sass 变量

sass 变量的 value 可以是：

• string

• number

• Boolean

• null 值

• 列表

用法：

$变量名: value;

sass 全局作用域：

// !global
$myColor: red !global;

注意：所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后使用 @include。

sass 嵌套属性：

// 可以这么写
font: {
  size: 18px;
  weight: bold;
}

sass @import 与 partials

Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

@import fileName;
// 注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。

sass partials：

不希望 将一个 Sass 的代码文件编译到一个 CSS 文件，

请在 文件名开头添加一个下划线。

_fileName;
// example: _test.scss

导入时 正常导入，无需下划线：

@import 'test';

注意：

1. 不要 将带下划线与不带下划线的同名文件放置在同一个目录下

2. 比如，_colors.scss 和 colors.scss 在同一个目录下，带下划线的文件 会被忽略

sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

混入的语法：

@mixin example {
  color: red;
  font-size: 18px;
}

注意： sass 的 - 和 _ 等同 ！！！

使用混入：

.类名 {
  @include 混入名;
}
/* 比如：
div {
  @include example;
}
*/

// 混入内包含混入：
@mixin myMixin3 {
  @include myMixin1;
  @include myMixin2;
}

向混入传递变量：

@mixin myMixin($color, $width) {
  color: $color;
  width: $width;
}
​
// 举例：
div {
  @include myMixin(red, 100px);
}
​
// 预设默认值
@mixin myMixin($color: red) {
  color: $color;
}

可变参数：

// 比如：font-family 参数数量可变：
@mixin font-family($fontName) {
  font-family: $fontName;
}
​
// 使用：
div {
  @include font-family(字体1, 字体2)
}

sass @extend 与 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

.div1 {
  color: red;
}
​
.div2 {
  @extend .div1;
  font-size: 18px;
}
​
.div3 {
  @extend .div1;
  width: 100px;
}

与 @mixin 区别：

// @extend 转换的 css 代码：
.div1, .div2, .div3 {
  color: red;
}
.div2 {
  font-size: 18px;
}
.div3 {
  width: 100px;
}
// 如此，html 类名只需 class="div2"
// class="div3"