这是精简版，详情请看 http://www.imooc.com/index/search?words=sass
什么叫Sass
Sass 是Syntactically Awesome Stylesheete Sass的缩写，是由Hampton Catlin开发的。
Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！ 例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值， 或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。Sass引 入了一些新的概念如，变量，混合，嵌套和选择器继承。Sass看起来似乎和css很像，但它没 有分号和大括号。
sass文件
以“.sass”后缀为扩展名，以严格的缩进式语法规则来书写，不带大括号({})和分号(;)
scss文件（推荐）
以“.scss”后缀为扩展名，书写和 CSS 语法书写方式非常类似。
Sass安装环境
旧时代的做法，现在不需要这样了，了解下就好。
1.安装Ruby
下载地址 http://rubyinstaller.org/downloads 或 http://ruby.taobao.org/
安装注意：安装地址不能有空格
2.切换成 RubyGame 镜像
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l结果是 https://ruby.taobao.org 时说明切换成功
3.安装Sass
$ gem install sass4.安装compass
$ gem install compass5.Sass编译成css
sass <scss路径/名字.scss> <css输出路径/名字.css>
例如：
$ sass app/style.scss css/style.css语法
声明变量(前面必须以 $ 开头)
$a:10px; //声明一个变量$a，可以覆盖前面定义的
$a:20px !default; //声明一个默认变量$a，不能覆盖前面定义的变量调用
属性值用 $a
属性或选择器用 #{$a}
父对象（&）
在伪类嵌套里讲
嵌套
选择器嵌套
nav {
a {
color: red;
p { color: blue; }
}
}编译后
nav a {
color:red;
}
nav a p {
color:blue;
}属性嵌套
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}编译后
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}伪类嵌套
.clearfix{
background:red;
&:hover {
background:blue;
}
}编译后
.clearfix { background:red; }
.clearfix:hover { background:blue }注：& 指父对象，这里指 .clearfix
混合宏（自定义函数）
没有参数
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
button{ @include border-radius; }不带值的参数
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
button{ @include border-radius(3px); }带值的参数（参数有默认值）
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
button{@include border-radius;}
//或 button{@include border-radius();}
//或 button{@include border-radius(5px);}//不适用默认参数继承
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}编译后
.btn, .btn-primary{
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}占位符
定义一组样式，通过@extend调用才会产生代码
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
}编译后
.btn {
padding-top: 5px;
}注释
使用 // 不会被编译到 css 上
支持加减乘除
.btn {
width: 10px + 20px;
}加减时两者类型要一样
逻辑结构
@if
@if $boolean1 {
//$boolean1为真
}@else if $boolean2 {
// $boolean2我真
}@else {
// 都为假
}@for
@for $i from 0 through 3 {
// 相当于js的 for(var i = 0; i <= 3; i++)
}
@for $i from 0 to 3 {
// 相当于js的 for(var i = 0; i < 3; i++)
}@while
@while $x > 0 {
// 当$x>0时进入循环体
}@each
@each $book in $books {
// 相当于js的 for(var book in books)
}内置函数
需要安装compass
字符串与数字函数
> unquote($string) 去除双引号
> quote($string) 加上双引号
> to-upper-case($string) 字母转大写
> to-lower-case($string) 字母转小写 数学函数
> percentage($value) 将一个不带单位的数转换成百分比值
> round($value) 将数值四舍五入，转换成一个最接近的整数
> ceil($value) 将大于自己的小数转换成下一位整数
> floor($value) 将一个数去除他的小数部分
> abs($value) 返回一个数的绝对值
> min($numbers⋯) 找出几个数值之间的最小值
> max($numbers⋯) 找出几个数值之间的最大值
> random() 获取随机数列表函数
> length($list) 返回一个列表的长度值
如 length(10px 20px) 结果为 2
> nth($list, $n) 返回 $list 里的第 $n 个值
> join($list1, $list2, [$separator]) 将两个列给连接在一起，变成一个列表
┗ 连接后的列表使用的分隔符（）
┣auto 有时用空格( )，有时用逗号(,) 默认
┣comma 逗号隔开(,)
┗space 空格隔开( )
如join(10px 20px,30px 40px,comma) 结果为( 10px,20px,30px,40px )
> append($list, $val, [$separator]) 把 $val 加入到 $list 后面，$separator同上
> zip($lists⋯) 将几个列表结合成一个多维的列表
如 zip(1px 2px 3px,solid dashed dotted,green blue red)
结果为 ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))
注：每个列表长度要一致
> index($list, $value) 返回 $value 在 $list 中的位置值，从1开始，没找到为 false数值单位函数
> type-of($value) 返回 $value 的类型,有 number、string、bool、color、list、null
> unit($number) 返回 $number 的单位,如 10px 的单位为 px
> unitless($number) 判断 $number 是否带有带单位
> comparable($number1, $number2) 判断两个值是否可以做加、减和合并三元条件函数
> if($condition, $if-true, $if-false) 相当于js的 $condition ? $if-true : $if-false;Map函数
> Map的定义：$color: (
default: #fff,
primary: #22ae39
);
> map-get($map,$key) 根据给定的 key 值，返回 map 中相关的值
> map-merge($map1,$map2) 将两个 map 合并成一个新的 map
> map-remove($map,$key) 从 map 中删除一个 key，返回一个新 map
> map-keys($map) 返回 map 中所有的 key
> map-values($map) 返回 map 中所有的 value
> map-has-key($map,$key) 根据给定的 key 值判断 map 是否有对应的 value 值，
如果有返回 true，否则返回 false
> keywords($args) 返回一个函数的参数，这个参数可以动态的设置 key 和 value颜色函数
> rgb($red,$green,$blue) 根据红、绿、蓝三个值创建一个颜色
如 rgb(10,10,10) 或 rgb(#ddd) 或 rgb(red)
> rgba($red,$green,$blue,$alpha) 根据红、绿、蓝和透明度值创建一个颜色
如 rgb(10,10,10,0.4) 或 rgba(#ddd,.4) 或 rgba(red,.4) 或 rgba($color,.5);
> red($color) 从一个颜色中获取其中红色值
> green($color) 从一个颜色中获取其中绿色值
> blue($color) 从一个颜色中获取其中蓝色值
> mix($color1,$color2,[$weight]) 把两种颜色混合在一起
┗百分百/浮点数 混合比重，50%为中介，少了就$color1量比较多HSL函数
> hsl($hue,$saturation,$lightness) 通过色相（hue）、饱和度(saturation)和亮度
（lightness）的值创建一个颜色
> hsla($hue,$saturation,$lightness,$alpha) 通过色相（hue）、饱和度(saturation)、亮度
（lightness）和透明（alpha）的值创建一个颜色
> hue($color) 从一个颜色中获取色相（hue）值
> saturation($color) 从一个颜色中获取饱和度（saturation）值
> lightness($color) 从一个颜色中获取亮度（lightness）值
> adjust-hue($color,$degrees) 通过改变一个颜色的色相值，创建一个新的颜色
> lighten($color,$amount) 通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色
> darken($color,$amount) 通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色
> saturate($color,$amount) 通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
> desaturate($color,$amount) 通过改变颜色的饱和度值，让颜色更少的饱和，
从而创建出一个新的颜色
> grayscale($color) 将一个颜色变成灰色，相当于desaturate($color,100%)
> complement($color) 返回一个补充色，相当于adjust-hue($color,180deg)
> invert($color) 反回一个反相色，红、绿、蓝色值倒过来，而透明度不变Opacity函数
> alpha($color) /opacity($color) 获取颜色透明度值
> opacify($color, $amount) / fade-in($color, $amount) 使颜色更不透明
> transparentize($color, $amount) / fade-out($color, $amount) 使颜色更加透明Sass的 @ 规则
@import "scss或sass文件" 不写后缀名，在scss或sass文件里导入另外一个文件
@media
@extend
@at-root 跳出根元素
debug
@warm
@error
