SASS 语法基础

SASS 语法基础

Sass 是一种可用于编写 CSS 的语言，起初由 Hampton Catlin 进行设计并由 Natalie Weizenbaum 开发。借助 Sass 我们可以少写很多 CSS 代码，并使样式代码的编写更加灵活多变。接下来将对 Sass 的几个主要功能进行讲解。

1. 样式文件导入

Sass 使用 @import 来导入其它的样式文件。如：

@import '~bootstrap/scss/bootstrap';

上面代码将导入 node_modules/bootstrap/scss/bootstrap.scss 文件。

你也可以使用下面代码来对单独一个文件进行导入：

@import "node_modules/bootstrap/scss/_alert.scss";

2. 变量

Sass 还允许你在代码中加入变量，所有的变量均以 $ 开头。

$navbar-color: #3c3e42;
.navbar-inverse {
  background-color: $navbar-color;
}

上面代码定义了一个 $navbar-color 颜色变量，在编译成功之后，变量将被替代为它所对应的值。

3. 嵌套

Sass 还允许你在选择器中进行相互嵌套，以减少代码量。

body div {
  color: red;
}

body h1 {
  margin-top: 10px;
}

可写成：

body {
  div {
    color: red;
  }

  h1 {
    margin-top: 10px;
  }
}

4. 引用父选择器

你还可以在 Sass 嵌套中使用 & 对父选择器进行引用：

a {
  color: white;
}

a:hover {
  color: blue;
}

可改写为：

a {
  color: white;
  &:hover {
    color: blue;
  }
}