我们先来解决在工作中可能会遇到跟sass有关的几个问题：
问题一：如果在编译sass的时候出现 zsh: command not found: sass
则可以运行下面的命令：
先用下面的命令去查找
where is sass
将文件加入到环境变量中去
export PATH=$PATH":/Library/Ruby/Gems/2.0.0/gems/sass-3.4.22/bin/"
执行这条命令
source /etc/profile
问题二：.vue文件中 sass 的使用识别问题
2082109683-5752eb0ef31bc_articlex.png
如图：webpack中虽然可以编译，但是在 webstorm 中报语法错误，强迫症的我无法接受，请问怎么解决呢？
首页，你可以尝试下面这样写，看能不能解决。
<style lang="scss" rel='stylesheet/scss'>
因为有可能是语法的问题，我们上面图片中用的是scss的语法，不是sass的语法，所以可以修改一下style标签试试。
另外，这个问题是在webstorm上出现的，那么，我们也可以通过配置webstorm来解决这个问题。具体为：
1，settings>Editor>Language Injections里面有5个内建的，可以参考一下，增加一项，选择第3个xml tag injection，name为这个配置名字 随便起。
2，Language选项中id请选择你想要用的 如scss。
3，XML Tag选项中Local name为style(匹配style标签)。
4，Namespace好像不选也没事(反正我照着css那个配置选了xhtml那个)
Advanced选项中XPath condition中写@lang='scss'(和上面的联合匹配style中lang属性为scss的内容区域)
问题三，.vue文件里引入第三方js和样式文件（sass，less，css）
话不多说，我们可以直接看下面这篇文章，介绍的很详细。
http://www.jianshu.com/p/c58f4af69304
问题四，如果要在scss文件中，输入中文的话，需要写上
@charset "UTF-8";
下面是我整理了一些SASS中比较常用的代码，主要是为了用的时候方便查找，仅供参考。
CSS不是一种编程语言，你可以用它开发网页样式，但没法用它编程。在程序员眼里，CSS它没有变量，没有条件语句，只是一行行单纯的描述。有人就开始为CSS加入编程元素，这被叫做“CSS预处理器”（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
SASS是Ruby语言写的，使用前必须先安装Ruby，然后再安装SASS。
1，安装
npm install sass
2，使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
2.1 使用命令行编译scss
单文件转换命令
sass style.scss style.css
单文件监听命令
sass --watch style.scss:style.css
sass --watch scss/main.scss:css/main.css
文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
选择生成哪种style样式的命令
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
● --style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。
● nested：嵌套缩进的css代码，它是默认值。
● compressed：压缩后的css代码。
● compact：简洁格式的css代码。
● expanded：没有缩进的、扩展的css代码。
● --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
● --debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。
3，在前端后端分离项目中使用sass
3.1 如果报错说sass-loader 或者 node-sass 找不到，看了下模板里的webpack文件，有可能是因为根据定义的lang去找对应的webpack loader，
于是运行npm install node-sass sass-loader --save就好了。
4，常用的一些语法
4.1 变量
$red: #f00;
$width: 200px;
p {
color: $red;
}
.test { width: $width; }
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body {
font-family: $fontStack;
color: $primaryColor;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
如果变量需要镶嵌在字符串之中，就必须写在#{}之中。
$side: left;
.rounded {
border-#{$side}-radius: 5px;
}
4.2 计算功能
body {
margin: ( 14px/2 );
top: 50px + 100px;
right: $var * 10%;
}
4.3 嵌套
div {
h1 {
color: red;
}
}
属性也可以嵌套，比如border-color属性：
p {
border: {
color: red;
}
}
注意，border后面必须加上冒号。
又比如在 Sass 中我们可以这样写：
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
在 Sass 中我们可以这样写：
.box {
border: {
top: 1px solid red; bottom: 1px solid green;
}
}
伪类嵌套：在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
.clearfix{ &:before,
&:after {
content:""; display: table;
}
&:after {
clear:both; overflow: hidden;
}
}
编译出来的 CSS：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
4.4 注释
sass共有两种注释风格：
标准的css注释 /* comment /，会保留到编泽后的文件。
单行注释 // comment，只保留在sass源文件中，编译中会忽略。
在/后面加一个!，表示这是“重要注释”。即使压缩模式的编译，也会保留这段注释。通常可以用于声明版权信息。
/*!
重要注释！
*/
5， 继承
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令：
.class2 {
@extend .class1;
font-size: 120%;
}
.message {
border: 1px solid #ccc;
padding: 10px; color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
6，Mixin （宏）
使用@mixin命令，定义一段代码块：
不带参数的混合宏：
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令，调用这个mixin
div {
@include left;
}
mixin带参数并有默认值：
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
下面传多个参数的mixin的实例，用来生成浏览器前缀
@mixin rounded($vert, $horz, $radius:10px){
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候，可以像下面这样调用：
#navbar li {
@include rounded(top, left);
}
#footer {
@include rounded(top, left, 5px);
}
@mixin box-sizing ($sizing) {
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
编译后会变成这样：
.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
7，占位符% placeholder
占位符% placeholder 可以取代以前CSS中的基类造成的代码冗余的情形。因为% placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码：
%mt5{
margin-top: 5px;
}
%pt{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
8，插入文件
@import命令，用来插入外部文件
@import 'path/filename.scss';
如果插入的是.css文件，则等同于css的import命令
@import 'foo.css';
@import根据文件名引入。默认情况下，它会寻找Sass文件直接引入，但是，在少数几种情况下，它会被编译成CSS的@import规则，例如：
● 文件的扩展名是 .css。
● 文件名以 http:// 开头。
● @import 包含了任何媒体查询（media queries）。
如果没有扩展名，Sass将试着找出具有.scss或.sass扩展名的同名文件并将其引入。
例如：
@import "foo.scss"
或
@import "foo";
也可以通过一个@import引入多个文件，例如：
@import "rounded-corners", "text-shadow";
如果你有一个SCSS或Sass文件需要引入，但是又不希望它被编译为一个css文件，就可以在文件名前面加一个下划线，就能避免被编译。这将告诉Sass不要把它编译成CSS文件。
9，条件语句
@if可以用来判断
p{
@if 1+1 == 2 { border: 1px solid; }
@if 5 < 3 {border: 2px dotted; }
}
配套的还有@else命令
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
10，循环语句
sass支持for循环
@for $i from 1 to 10 {
.border-#{$i}{
border: #{$i}px solid blue;
}
}
支持while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i : $i -2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member}{
background-image: url("/image/#{$member}.jpg");
}
}
11，自定义函数
SASS允许用户编写自己的函数：
@function double($n) {
@return $n *2;
}
使用：
#sidebar {
width: double(5px);
}
网友评论