Sass

1.安装：
1）安装ruby，
2）更换gem源，尝试了一下中文网那个淘宝源不好使。在网上找了其他的：gem sources -a http://gems.ruby-china.org
但是gem sources -1还是不能打印出来，不过直接进行安装gem install sass, 显示安装成功。
install compass，显示安装成功。


2.编译sass
1）命令行编译：sass input.scss output.css
2）koala编译


3.基本语法：
1）文件后缀名：.sass, .scss。scss相对对于格式要求较松。
2）导入：@import，将@import的scss文件合并只生成一个css文件。
命名：_mixin.scss，寄出的文件命名以_开头，文件导入时可以不写下划线。@import "mixin".
2）注释：标准css注释:/**/或//
3）变量：变量必须以$开头，后面紧跟变量名。变量值与变量名之间用冒号分开。
a）普通变量：定以后可全局使用，

$fontSize: 12px;body{    font-size:$fontSize;}

b）默认变量：仅需在值后面加上！default

$baseLineHeight:        1.5 !default;body{    line-height: $baseLineHeight; }

c）特殊变量：定义的变量是属性值。但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

$borderDirection:       top !default; $baseFontSize:          12px !default;$baseLineHeight:        1.5 !default;//应用于class和属性.border-#{$borderDirection}{  border-#{$borderDirection}:1px solid #ccc;}//应用于复杂的属性值body{    font:#{$baseFontSize}/#{$baseLineHeight};}

d）多值变量：list或map类型。

list

//sass style//-------------------------------$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值a{  color:nth($linkColor,1);  &:hover{    color:nth($linkColor,2);  }}//css style//-------------------------------a{  color:#08c;}a:hover{  color:#333;}

map

//sass style//-------------------------------$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {  #{$header} {    font-size: $size;  }}//css style//-------------------------------h1 {  font-size: 2em; }h2 {  font-size: 1.5em; }h3 {  font-size: 1.2em; }

4. 嵌套

1）选择器的嵌套：一个选择器集成另一个选择器

2）属性嵌套：当属性有相同的开始单词时，嵌套。

5.混合

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

//sass style//-------------------------------@mixin center-block {    margin-left:auto;    margin-right:auto;}.demo{    @include center-block;}//css style//-------------------------------.demo{    margin-left:auto;    margin-right:auto;}

mixin也可以带有参数值。

//sass style//-------------------------------   @mixin opacity($opacity:50) {  opacity: $opacity / 100;  filter: alpha(opacity=$opacity);}//css style//-------------------------------.opacity{  @include opacity; //参数使用默认值}.opacity-80{  @include opacity(80); //传递参数}

@content用来解决@media的问题

//sass style//-------------------------------                     @mixin max-screen($res){  @media only screen and ( max-width: $res )  {    @content;  }}@include max-screen(480px) {  body { color: red }}//css style//-------------------------------@media only screen and (max-width: 480px) {  body { color: red }}            

6. 继承：@extend，一个选择器可以继承另一个的样式，而且有不相同的样式时，可以对样式进行重写。

//sass style//-------------------------------h1{  border: 4px solid #ff9aa9;}.speaker{  @extend h1;  border-width: 2px;}//css style//-------------------------------h1,.speaker{  border: 4px solid #ff9aa9;}.speaker{  border-width: 2px;}

7.占位选择器。避免冗余，对基础样式的处理，在基础验前加上%，通过extend调用。

//sass style//-------------------------------%ir{  color: transparent;  text-shadow: none;  background-color: transparent;  border: 0;}#header{  h1{    @extend %ir;    width:300px;  }}

8. 函数：通过@function定义函数。

@function pxToRem($px) {  @return $px / $baseFontSize * 1rem;}

9. sass可以进行运算，运算符前后有空格，否则会报错。

10.条件判断及循环：

1）@if，@else。

2）三目判断：if($condition, $if_true, $if_false)

3）for循环：@for $var from <start> through <end>和@for $var from <start> to <end>。这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

//sass style//-------------------------------@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}//css style//-------------------------------.item-1 {  width: 2em; }.item-2 {  width: 4em; }.item-3 {  width: 6em; }

4）@each：@each $var in <list or map>

//sass style//-------------------------------$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');  }}

代码参考：https://github.com/YZlingyu/teambition/blob/master/css/index.scss