Sass使用一条线

一、安装

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

Sass使用一条线