一 什么是sass
sass是一种css开发工具。提供了很多便利的写法，使得css开发变得简单 易维护
sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号，所以一般都是用第二种写法
二 官网
阮一峰博客（sass部分）：http://www.ruanyifeng.com/blog/2012/06/sass.html
三 ruby安装
因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
四 sass安装
然后直接在命令行中输入
gem install sass
按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。
如果要安装beta版本的，可以在命令行中输入
gem install sass --pre
你还可以从sass的Git repository来安装，git的命令行为
git clone git://github.com/nex3/sass.git
cd sass
rake install
升级sass版本的命令行为
gem update sass
查看sass版本的命令行为
sass -v
你也可以运行帮助命令行来查看你需要的命令
sass -h
淘宝RubyGems镜像安装 sass
由于国内网络原因，导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过
gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了，关于常用gem source命令可参看：常用的gem source
$ 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
淘宝镜像也不好用了
gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.org/
gem sources -l
五 使用
sass文件就是普通的文本文件 里面可以直接使用css语法。后缀名为.scss （Sassy css）
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
sass 提供4种编译风格的选项
nested 嵌套缩进的css代码。是默认值
expanded 没有缩进 扩展的css代码
compact 简洁格式的css代码
compressed 压缩后的css代码
生产环境中，一般使用最后一个选项： sass --style compressed test.scss test.css
sass官方的在线转换器：http://www.sassmeister.com/
sass 也可以监听文件，一旦文件被改动，就自动生成编辑后的版本
sass --watch test.scss:test.css
监听文件夹：
sass --watch sassFileDirectory:cssFileDirectory
六 基本用法
6.1 变量(在选择器中声明的变量会覆盖全局声明的变量)
任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;变量声明后被引用才算生效。
6.1.1 sass所以的变量以$开头 变量名中的中划线和下划线相互兼容
$blue:#1875e7;
div{color:$blue;}
6.1.2 如果变量需要镶嵌在字符串之中 就必须写在#{}之中
$left:left;
.rounded {border-#{$left}-radius:5px;}
6.1.3 默认变量：sass的默认变量仅需要在值后面加上
!default即可。 sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可 6.1.4 多值变量
6.1.4.1 list类型
list数据可通过空格，逗号或小括号分隔多个值，可用
nth($var,$index)取值$px: 5px 6px 8px 10px;//一维数组
$pxT: 10px 20px , 30px 40px;//二维数组
$trpx:(1px solid #eee ) (16px solid #aaa);//二维数组 .class8 {
font-size: nth($px,3);
}
.class9 {
border: nth($trpx,1);
}
.class10 {
margin: nth($pxT,2);
}
6.1.4.2 map类型
map数据以key和value成对出现，其中value又可以是list。格式为：
$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。$headings:(h1:2em,h2:1.5em,h3:1em);
.class11 {
font-size: map-get($headings,h2);
} @each $heade , $size in $headings {
#{$heade} {
font-size: $size;
}
}
6.2 可使用算术
$var:10;
body{margin:(14px/2);top:50px+100px;right:$var*10%;}
6.3 嵌套
6.3.1选择器嵌套：
div{
color:$blue;
h1 {
color:red;
}
}
6.3.2属性嵌套：
p {
border:{
color:red;
}
}
}
此时 border后面的冒号必须加
6.3.3&引用父元素
a {
&:hover {color:red;}
}
#content aside { color: red;body.ie & { color: green }}
6.3.4 群组选择器的嵌套
.container { h1, h2, h3 {margin-bottom: .8em} }
nav, aside { a {color: blue} }
6.4注释
中文注释的报错，乱码的问题解决：
步骤：1、找到下面这个文件C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass\engine.rb 即自己的安装目录路径
2、找到
require 'sass/supports'这一行，在下面一行添加Encoding.default_external = Encoding.find('utf-8')
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
七 代码的重用
7.1继承
sass可以实现选择器的继承
.class1 {
border: 1px solid #ddd;
}
.calss2 {
@extend .class1;
font-size: 20px;
}
结果截图：
7.2 sass代码块的重用
使用@mixin命令 定义一个代码块 例如下面的left
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令 调用这个mixin
.class3 {
@include left;
}
@mixin 还可以指定参数和缺省值
@mixin right($value:10px) {
float: right;
margin-right: $value;
}
使用的时候，根据需要加入参数：
.class5 {
@include right()
}
如果不传参数，就是默认值
.class4 {
@include right(40px)
}
常用于：生产浏览器前缀
@mixin rounded ($vert,$horz,$radius:10px) {
border-#{$vert}-#{$horz}-radius:$radius;
-moz-border-#{$vert}-#{$horz}-radius:$radius;
-webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
.nav {
@include rounded(top,left)
}
.footer {
@include rounded(top,left,5px)
}
多组值参数mixin
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如
$variables...。 @mixin box-shadow ($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow: $shadow;
}
@content: 使@mixin接受一整块样式，接受的样式从@content开始
@mixin max-screen ($res) {
@media only screen and (max-width: $res) {
@content;
}
}
@include max-screen(480px) {
body {color:red;}
}
7.3 颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
7.4 插入文件
@import 命令可以插入外部文件
scss文件：@import 'path/name.scss'
css文件：@import 'name.css'
8 高级用法
8.1 条件语句
@if 可以用来判断 配套的还有@else命令
.class6 {
@if 1+1 == 2 {color:red}
@if 5 < 3 {color:blue}@else {
background-color: #FFF
}
}
8.2循环语句
8.2.1 for循环 for循环有两种形式，分别为：
@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。 @for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid red;
}
}
8.2.2 while
$i:6;
@while $i > 0 {
.item-#{$i} {width:20px;}
$i:$i - 2;
}
8.2.3 each
@each $member in a,b,c,d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
8.3 自定义函数 @function @return
@function double($n) {
@return $n * 2;
}
.class7 {
width: double(5px);
}
8.4 @at-root 为了跳出选择器嵌套的。默认所以得嵌套，继承所有上级选择器。但有了这个就可以跳出所有上级选择器。
//单个选择器跳出
.parent {
color:red;
@at-root .child {
width: 100px;
}
}
//多个选择器跳出
.parent2 {
color:blue;
@at-root {
.child1 {width: 100px;}
.child2 {width: 200px;}
}
}
8.4.1默认
@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)
//跳出父级元素嵌套
@media print {
.parent2 {
color: red;
@at-root .child3 {
color: blue;
}
}
} //跳出media嵌套 父级有效
@media print4 {
.parent4 {
color: red;
@at-root (without: media) {
.child4 {
width: 200px;
}
}
}
} //跳出media和父级
@media print5 {
.parent5 {
color:red;
@at-root (without:all) {
.child5{height: 200px;}
}
}
}
8.4.2 @at-root 于 & 配合使用
.child6 {
@at-root .parent6 & {
height: 300px;
}
}
8.4.3占位选择器
%
从sass 3.2.0以后就可以定义占位选择器
%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。 %ir {
color:transparent;
text-shadow:none;
background-color: transparent;
border:0;
}
%clearfix {
@if $ie7 {
*zoom :1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0;
}
&:after {
clear: both;
}
}
#header {
width: 2100px;
@extend %ir;
}
.ir {
@extend %ir;
}
九 编译
9.1 sublime装SASS build插件，可以在sublime的packages文件夹下打开终端从github的https://github.com/jaumefontal/SASS-Build-SublimeText2.git上clone。然后编辑.scss直接保存即可编译
9.2 官方的在线转换器：http://www.sassmeister.com/
9.3 在项目的scss文件夹下用终端命令
9.4 据说webstorm内置了sass的编译
9.5 图形化工具 koala
9.6 gulp