Sass 基础笔记 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 20 天，今天在开发青训营大项目的过程

这是我参与「第五届青训营」伴学笔记创作活动的第 20 天，今天在开发青训营大项目的过程中，学习了 CSS 预处理器 Sass 的使用。

简介

官方网站：

www.sass.hk/guide/

www.sasscss.com/

sass-lang.com/ （英文）

Sass 是一个 CSS 预处理语言，经过编译后可以生成 CSS 代码。Sass 可以帮助我们更好地编写 CSS 代码，在代码复用和维护上提供了便利。

Sass 文件后缀为 .scss。

在 Vue 单文件组件中通过 <style lang="scss"> 使用 Sass 语言。

在 Sass 中通过 @import 导入其他样式文件。

Sass 变量使用 $ 符号：

$variablename: value;

#container {
  width: $myWidth;
}

想要使用后代选择器时，Sass 可以嵌套编写：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后会变成 CSS 后代选择器：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

当后代选择器选择器不能满足需求时，使用 & 代表父选择器，然后手动拼接选择器：

article a {
  color: blue;
  &:hover { color: red }
}

编译后会用父选择器替换 & 拼接成子选择器：

article a { color: blue }
article a:hover { color: red }

属性也可以嵌套编写：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

编译后会自动加上 - 拼接成 CSS 属性：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

使用嵌套属性指明例外规则：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

混合器使用 @mixin 标识符定义：

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

通过 @include 来使用这个混合器：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

这样就可以使用混合器定义的属性。

在混合器名称后使用括号加上参数。参数名用 $ 定义。

在选择器内部，像使用变量那样使用参数。

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

为参数添加默认值，当使用者没有传入参数值时会使用默认的参数值：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  ) {...}

在混合器后加上括号来使用参数：

a {
  @include link-colors(blue, red, green);
}

或者，使用 $name: value 指定参数的值，这样就无需按照顺序使用参数了：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

使用 @extend 继承选择器的样式：

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

继承后的选择器会包含被继承选择器的全部样式。

除了 /* */ 这种 CSS 原生注释，在 Sass 中可以使用以 // 开头的注释。

以 // 开头的注释不会出现在编译后的 CSS 中。