Sass入门

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

一、Sass的安装

这里只介绍Mac环境下的安装

brew install ruby  // sass基于ruby编写的，所以要确保有ruby环境
sudo gem install sass

二、Sass和SCSS的区别

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

• 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
• 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

三、编译SCSS

• 命令编译
• GUI工具编译
• 自动化编译

1. 命令编译

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

// 例如
sass test.scss:test.css

2. GUI工具编译

对于 GUI 界面编译工具，目前较为流行的主要有：

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout（http://mhs.github.io/scout-app/）
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros（https://prepros.io/）

3. 自动化编译

对于sass的自动化编译我还真不了解，但是目前也没有学习的必要，因为在使用webpack打包时会帮我编译scss文件，想学习的盆友可以参照以下链接：

《Grunt-beginner前端自动化工具》：http://www.imooc.com/learn/30

结束语

在接下来的文章中我会去深入学习sass的特性以及用法。一起学习的盆友可以关注我。

转载请注明来源

参考链接 ：
https://www.sass.hk/guide/
https://www.imooc.com/code/6411