Sass 基础知识

前言

• Sass 是一个 CSS 预处理器。是 CSS 的扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。完全兼容所有版本的 CSS。

• Sass 官网

• Sass 中文网

• Sass 教程

• Sass 中文教程

• Sass Guidelines（中文版）

1、Sass

• Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

• CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且代码也不方便维护。Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

• Sass 生成良好格式化的 CSS 代码，易于组织和维护。

• Sass 文件后缀为 .scss。

2、安装

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

2.1 NPM 安装

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

  $ npm install -g sass

• 安装完成后可以查看版本：

  $ sass --version
  
  1.32.13 compiled with dart2js 2.12.4

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

2.2 Windows 上安装

• 可以使用 Windows 的包管理器 Chocolatey 来安装：

  $ choco install sass

2.3 Mac OS X (Homebrew)安装

• Mac OS 可以使用 Homebrew 包管理器来安装：

  $ brew install sass/sass/sass

3、使用

• 创建一个 .scss 文件，文件代码如下。

• 实例

  /* 定义变量与值 */
  $bgcolor: lightblue;
  $textcolor: darkblue;
  $fontsize: 18px;
  
  /* 使用变量 */
  body {
    background-color: $bgcolor;
    color: $textcolor;
    font-size: $fontsize;
  }

• 在命令行输入下面命令，即将 .scss 文件转化的 css 代码。

  $ sass test.scss

  @charset "UTF-8";
  /* 定义变量与值 */
  /* 使用变量 */
  body {
    background-color: lightblue;
    color: darkblue;
    font-size: 18px;
  }

• 可以在后面再跟一个 .css 文件名，将代码保存到文件中。这时会在当前目录下生存 test.css 文件，代码如下。

  $ sass test.scss test.css

  @charset "UTF-8";
  /* 定义变量与值 */
  /* 使用变量 */
  body {
    background-color: lightblue;
    color: darkblue;
    font-size: 18px;
  }
  
  /*# sourceMappingURL=test.css.map */