最近在看sass，先总结了一点点，为了以后自己来看不用去翻文档；如果那里不正确欢迎指正！
什么是 Sass？
Sass 官网上是这样描述 Sass 的：
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass 和 SCSS 有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
sass需要依赖Ruby，因为我的电脑是windows系统所以Mac系统安装怎么安装Ruby没有去进一步研究，在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的
Ruby 版本。
下载好文件个人建议安装到c盘，安装好后打开ruby的command控制面板，之后就可以在电脑上安装sass
安装sass
1、通过命令安装 Sass
打开电脑的命令终端，输入下面的命令：
gem install sass
mac安装需要在命令前面加“sudo”即 sudo gem install sass
2、通过compass安装sass
除了使用 gem 命令来安装 Sass 之外，还可以通过安装 compass 来安装 Sass，因为 Compass 是基于 Sass 开发的一个框架。也就是说，你安装了 Compass，也就同时安装好了 Sass。
同样的在你的命令终端输入下面的命令：
sudo gem install sass
3、淘宝rubyGems镜像安装sass
gem sources --remove https://rubygem
gem sources -a https://ruby.taobao.org/
gem sources -l
返回结果如下：
*** CURRENT SOURCES ***
https://ruby.taobao.org
请确保只有 ruby.taobao.org。如果无误之后，执行下面的命令：
gem install sass
验证安装成功：
安装好以后 输入sass -v 如果在你的命令终端能看见版本号就是安装成功了；
更新sass
gem upadte sass
卸载（删除）
gem uninstall sass
编码风格
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
webstorm 配置file watchers ，这个可搞了我有一会时间，一直报找不到文件，后来才发现是在新建的时候压根就没有scss这个模板，所以第一步就是检查自己之前有没有配置过这个模板，点击要创建scss文件的文件夹，（我这里说没有的情况下怎么去创建）
1.New->Edit file Templates
2.选择左上角的加号，在右侧Name名字位置上填写scss/sass,在Extension填写scss，点击ok，返回主页面再重复第一步骤操作你会发现有scss这个模板了，
3.点击File-settings-Tools-file watchers 如下图所示，点击右侧点击按钮，选择要监控的文件类型，填写下图的一些配置就ok啦；最近发现webstorm真的很强大有点爱不释手的感觉呢；
相关配置
Program:C:\Ruby23-x64\bin\scss.bat
Arguments:--no-cache --update --sourcemap
--watch $FileName$:$FileNameWithoutExtension$.cssWorking directory:$FileDir$
Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
最后创建scss之后就会生产.css，.css.map 如下图：
注释
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”
sass的数据类型
sass和javascript语言类似也有自己的数据类型
数字：如1、2、3、12px;
字符：有引号或无引号字符串，如：“foo”，‘bar’，foo;
颜色：如，black，#bf1832,rbga（255,0,0,0.5）;
布尔型：如，true，flase；
空值：null；
值列表：用空格或逗号分开，如，1.5em
1em 0 3em，Helvetica, Arial, sans-serif
SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。
一、变量
全局变量:
$color:red !default; 全局变量就是定义在元素外面的变量
span{ $color:blue;定义在元素内部的变量
b{color:$color }
}
全局变量的影子
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为 了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。
变量的使用建议：
该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）
二、选择器嵌套
选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，sass的嵌套分为三种
- 选择器嵌套
- 属性嵌套
- 伪类嵌套
<header>
<nav>
<div>1</div><div>2</div><div>3</div></nav>
</header>
css：nav div{color：red}
header nav div{color：blue}
scss：nav {
div{ color：red;
header &{
color:blue
}
}
}
三、嵌套-属性
css中有些属性前缀相同，后缀不同 比如border-top；border-left；margin、padding、font、backgound等，比如
css：.warp{
border-top:1px solid #ccc;
border-bottom:1px solid #000;font-size:14px;
font-weight:blod;
}
scss：.warp{
border{top:1px solid #ccc;bottom:1px solid #ccc;}font{size:14px;weight:blod;}
}
四、嵌套-伪类嵌套
伪类嵌套和属性嵌套非常相似，只不过他要借助“&”符号一起来配合使用，我们就拿精蛋的“clearfix”为列子：
css： .clear{width:100%;margin:0 auto;*zoom:1}
.clear:before，.clear:after{display:table;content:"";}
.cleear:after{clear:both;]
scss： .clear{
width:100%;margin:0 auto;*zoom:1;&:befor,&:after{display:table;content:""}&:after{clear:both}
}
避免使用选择器的嵌套：
- 选择器嵌套的醉倒问题是使最终的代码难以阅读，开发者需要花费大量的精力去计算不同缩进级别的选择器具体的表象效果
- 选择器越具体声明语句越冗余，而且对最近选择器的引用（&）也越频繁，在某些时候，出现混淆的选择器路径和探索下一级选择器的错误率很高，这非常不值得
所以为了防止此类情况，我命应该尽可能的避免使用选择器仙桃，然而显然只有少数的情况适应这一措施；
五、混合宏
如果网站中有几处小样是类似，颜色 字体等 在sass中可以用变量来统一控制，但是当样式变得越来越复杂，需要使用大量的样式时候使用变量已经不能达到我们的目的，这个时候sass中的混合宏 就变得非常有意义；
声明混合宏： 不带参数的混合宏
使用@mixin来声明
不带参数的： @mixin border-radius{ border-radius混合宏名称
-webkit-border-radius:5s;
border-radius:5px;
}
不带值的参数： @mixin border-radiu（$raduis）s{ border-radius混合宏名称
-webkit-border-radius:$raduis
border-radius:$raduis
}
带默认值得参数： @mixin
border-radiu（$raduis:5px）s{ border-radius混合宏名称-webkit-border-radius:$raduis
border-radius:$raduis
}
复杂的混合宏：
@mixin size($width,$height){width: $width;height: $height;}
@mixin box-shadow（$shadow...）{
@if length($shadow)>1{
@include prefixer(box-shadow,$shadow);
}@else{
$shadow:0 0 4px rgba(0,0,0,3);@include prefixer(box-shadow$shadow);
}
}
使用@include来调用混合宏
不带参数： input{
@include border-radius；}
不带值得参数：input{@include border-radius（5px）}
带默认值得参数：input{@include border-radius ;}
复杂的混合宏（多个参数）
input{@include size（100px,100px）}
当混合宏的参数过多时可以用“...”参数来替换
input{
@include box-shadow(0 0 1px rbg(#000,.5),0 0 2px rgba(#000,.2))
}
* 混合宏在实际的编码中给我们带来方便 特别是对于复用重复的代码块，但它的最大的不足就是生产冗余的代码块 ，在不同的地方调用一个混合宏是并不能够只能的将相同的样式代码块合并在一起
六、继承
不只是java，c#，css有继承，scss也有继承这么一说，也是继承类中的样式代码块，在scss中是通过关键词“@extend”来继承已经存在的样式块，从而来实现代码的继承；
scss：.btn{
border:1px solid #ccc；
font-size:14px;
}
.btn-small{
background：#bf1832;
color：#fff;
@extend：.btn;
}
.btn-middle{
background：#bf1832;
color:#000;
@extend：.btn
}
css： .btn，.btn-small，.btn-middle{border:1px solid #ccc;font-size:14px}
btn-small{ background：#bf1832; color：#fff; }
.btn-middle{background：#bf1832; color:#000; }
七、占位符（%）
占位符%placeholder是一个很强大很实用的一个功能，也是我个人喜欢的功能，占位符可以取代css中基类造成的冗余代码的一个情况，因为运用占位符来声明的代码如果不被@extend调用的话不会产生任何代码；
scss： %pdt{padding-top:5px；}
%mt{margin-top:5px;}
.btn{@extend:%mt,@extend:%pdt}
.btn-small{@extend:%pdt}
css： .btn,.btn-small{padding-top：5px}
.btn{margin-top:5px;}
八、混合宏 继承 占位符
什么时候使用混合宏，什么时候使用继承，什么时候使用占位符是初学者常常纠结的一个问题
混合宏：
总结：因为混合宏不会自动合并相同的样式，如果一个样式文件多次调用一个混合宏，会产生对个对应的样式代码，从而造成了代码的容易，
个人建议：如果你的代码块中涉及到了变量，建议适合用混合宏来创建相同的代码块；
继承：
总结：使用继承后，编辑出来的Css会将使用的代码块合并到一起通过组合选择器的方式向大家展现
但它不能传递参
个人建议：你过你的代码不需要专任何变量参数，而且有一个基类一再文件中存在。建议使用sass继承
占位符：
总结：采用占位符编辑出来的css代码和使用继承是相同，占位符是独立定义的，不调用的时候是不
会再css中产生任何代码，而继承是首先要有一个基类不管调没调用，基类样式都会在编译之后的css 代码中；
九、插值#{}
使用css预处理器语言的一个主要的原因就是想使用sass获得一个好的体系结构，比如你想写更干净更高效面向对象的css，这sass中的插值就是最重要的一个部分；
sass：
$property:(margin,padding);
@mixin set-value($side,$value){
@each $prop in $property{
#{prop}-${side}:$value;
}
}
.lo{
@include set-value(top,10px)
}
css：
.lo{margin-top:10px;padding-top:10px;}
其中each...in 遍历$property；
插值也可以用来构建选择器
sass：
@mixin generate-size($class,$small$medium,$big){
.#{$class}-small{font-size：$small；}.#{$class}-medium{font-size：$medium；}
.#{$class}-big{font-size：$big；}
}
@include generate-size("header",10px,20px,30px)
css：
.header-big { font-size: 40px; }
.header-medium { font-size: 20px; }
.header-small { font-size: 10px; }
十、字符串
sassScript支持css两种字符串类型：
- 有引号字符串（quoted strings）如：“http://baidu.com”;
- 无引号的字符串（unquoted strings）如：sans-serifbold；
在编译css文件时候不会改变其类型，只有当使用插值（#{}）有引号字符串会被编译为无引号字符串，这样方便了在混合指令（mixin）中引用选择器名
sass：
@mixin firefox-message($selector) {
body.firefox#{$selector}:before
{content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
css：
body.firefox .header:before {
content: "Hi, Firefox users!"; }
十、值列表
所谓值列表 (lists) 是指 Sass 如何处理 CSS 中：
margin: 10px
15px 0 0 或者： font-face: Helvetica,
Arial, sans-serif
像上面这样通过空格或者逗号分隔的一系列的值。
事实上，独立的值也被视为值列表——只包含一个值的值列表。
Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）：
- nth函数（nth function） 可以直接访问值列表中的某一项；
- join函数（join function） 可以将多个值列表连结在一起；
- append函数（append function） 可以在值列表中添加值；
- @each规则（@each rule） 则能够给值列表中的每个项目添加样式。