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 界面编译工具，目前较为流行的主要有：
- Koala (http://koala-app.com/)
- Compass.app（http://compass.kkbox.com/）
- Scout（http://mhs.github.io/scout-app/）
- CodeKit（https://incident57.com/codekit/index.html）
- 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
