一、安装
1、如果你的系统是max osx ，只需要一步
在所有菜单中找到终端 ,考虑到权限问题，我在命令行前加上sudo,回车后键入密码
sudo gem install sass
2、如果你的系统是 window，需要两步
- 1、安装ruby，因为sass依赖于ruby环境，so先到官网下载个ruby （http://rubyinstaller.org/downloads）
注意一点： 在安装的时候，请勾选Add Ruby executables to your PATH（如下图）这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。
Paste_Image.png
- 2、好，现在假设你已经成功安装了ruby， 在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
输入：gem install sass
注意：
这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像：
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass
二、webstorm下设置sass（webstorm可以自动编译sass噢）
1、打开Webstorm的设置界面，然后搜索File Watcher；
2、点击＋号，选择scss或sass
3、
Paste_Image.png
4、修改上图中的Arguments为：
--no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css
5、修改上图中的Output paths to refresh为：
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
到这里，你就完成了webstorm下设置sass自动编译了
三、命令编译
除了webstorm能够编译sass，还可以使用命令编译，这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入
1、一次性编译
- 单文件编译
sass <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css
- 多文件编译
sass sass/:css/
//上面的命令表示将项目中“sass”文件夹中
//所有“.scss”(“.sass”)文件编译成“.css”文件
//并且将这些 CSS 文件都放在项目中“css”文件夹中。
2、开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来（相当于设置webstorm自动编译sass）
sass --watch <要编译的sass文件路径>/style.scss:<要输出css文件路径>/style.css
四、sass不同样式风格的输出方法
sass --watch test.scss:test.css --style (nested/expanded/compact/compressed)
- 嵌套输出方式 nested（不建议）
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
- 展开输出方式 expanded
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
- 紧凑输出方式 compact
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
- 压缩输出方式 compressed
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}
五、常见编译错误
1、字符编译引起的
在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。
2、路径中的中文字符引起的
建议在项目中文件命名或者文件目录命名不要使用中文字符
六、Sass调试
使用 Sass 的程序媛都希望能在浏览器中直接调试 Sass 文件，找到对应的行数。哈哈，这个so easy! 只要你的浏览器支持“sourcemap”功能即可,实操看下图，如果图片显示不出来，可以点击http://img.mukewang.com/54f7b71d0001bb0b05050268.jpg
Paste_Image.png
七、Sass与SCSS的区别
不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同
假设我们有这样的一段css代码
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
1、SCSS 语法格式编写
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
2、Sass 语法格式编写
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
注意：
“.sass”只能使用 Sass 老语法规则（缩进规则－通过 tab 键控制缩进的一种语法规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）
个人更加青睐SCSS
网友评论