Sass使用介绍

参考

Sass中文网

1. 简介

Sass (Syntactically Awesome Stylesheets，“语法上很棒的样式表”) 是一种css扩展语言，帮助减少css的重复代码，文件后缀为 .scss。

特点：

Sass 生成良好格式化的css代码，易于组织和维护。
Sass 扩展了css3，增加了规则、变量、混入、选择器、继承、内置函数等特性。
Sass 完全兼容所有版本的 css。

原理：

浏览器并不支持 Sass 代码。需要使用一个 Sass 预处理器将 Sass 代码转换为css代码。

示例:
一些场景中，css中会重复使用多次十六进制的颜色代码，当有了变量之后，如果要改变颜色代码，只要修改变量的值：

/* test1.scss */
/* 定义颜色变量，要修改颜色值，修改这里就可以了 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* 使用变量 */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

2. 安装Sass

我们可以使用 npm（NPM 使用介绍）来安装 Sass。

npm install -g sass

注：国内 npm 建议使用淘宝镜像来安装，参考：NPM 国内慢的问题解决

安装完成后查看版本：

$ sass --version
1.25.0 compiled with dart2js 2.7.0

3. 简单示例

使用如下命令，即可将.scss文件转换为css代码：

sass test1.scss test1.css

test1.css的内容如下所示：

@charset "UTF-8";
/* test1.scss */
/* 定义颜色变量，要修改颜色值，修改这里就可以了 */
/* 使用变量 */
.main-header {
  background-color: #a2b9bc;
}

.menu-left {
  background-color: #b2ad7f;
}

.menu-right {
  background-color: #878f99;
}

/*# sourceMappingURL=test1.css.map */

4. Sass语法-变量

Sass 变量可以存储以下信息：

字符串
数字
颜色值
布尔值
列表
null 值

变量使用 $ 符号，$variablename: value;

变量作用域

变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

使用 !global 关键子设置的变量是全局的。如下示例

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

p 标签的样式就会变成 green。

5. Sass语法-嵌套规则与属性

Sass嵌套规则：Sass 嵌套规则 CSS 选择器类似于 HTML 的嵌套规则。

Sass代码

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

css代码

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass嵌套属性

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。在 Sass 中，我们可以使用嵌套属性来编写它们。

sass代码

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

css代码

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

6. Sass语法-@import

类似 CSS，Sass 支持 @import 指令。指令语法如下：

@import filename;

包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。
此外，你也可以导入 CSS 文件。
导入后我们就可以在主文件中使用导入文件等变量。

示例

reset.scss代码：

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件：

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

将以上代码转换为 CSS 代码，如下所示：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

说明：

如果你不希望将一个 Sass 的代码文件编译到一个css文件，可以在文件名的开头添加一个下划线。
请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。