Sass 笔记

http://www.w3cplus.com/sassguide/
http://www.ruanyifeng.com/blog/2012/11/compass.html

基本特性

• sass中可以定义变量，方便统一修改和维护
• sass可以进行选择器的嵌套，表示层级关系
• sass中如导入其他sass文件(可以使用导入文件的变量)，最后编译为一个css文件，优于纯css的@import
• sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用

<!--处理css3的前缀兼容轻松便捷 @mixin语法后面有介绍（ctrl + F）-->
@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);
}

• sass可通过@extend来实现代码组合声明，使代码更加优越简洁
• 进行简单的加减乘除运算等
• 集成了大量的颜色函数

安装

1. 首先安装依赖环境ruby
2. 打开ruby的cmd，执行 gem install sass命令安装sass
3. 命令 sass style.scss style.css转译sass为css文件
   转译比较蛋疼，需要以管理员身份打开cmd或者打开ruby的cmd doss窗口，否则系统不识别sass命令(难道需要重启？待确认)
4. 单文件监听 sass --watch style.scss:style.css
5. 文件夹监听命令 sass --watch sassFileDirectory:cssFileDirectory

工具

• 官方在线转换器
• koala.exe 下载
• sass监听
• webstorm配置监听（设置-工具-文件监听器-添加sass或scss监听 注意修改Programe配置项）
  ![4KKY@@_U{{54@4%Z0SJ`@8.png

注意 遇到中文无法监听通过的解决办法

1. 进入【ruby安装目录\lib\ruby\gems\2.2.0\gems\sass-3.x.xx\lib\sass】；
   打开【engine.rb】文件添加 Encoding.default_external = Encoding.find('utf-8')，放在所有的 require "xxx"后面；

2. sass内部最前边加上 @charset "UTF-8";

语法

参考文档：http://www.w3cplus.com/sassguide/syntax.html

1. 文件后缀名： sass（不适用大号和分号的语法，不推荐使用）和scss（类似css的语法，推荐）

2. 导入@import "ScssFileNameWithoutSuffix": 编译时会将@import的scss文件合并进来只生成一个CSS文件，可以使用引用文件中定义的变量（把变量定义在一个文件，作为公共文件导入），可以减少浏览器http请求！

3. 注释：终于支持//行注释了，css只支持块状注释/*...*/

4. 变量

   • 一般变量 $varName: value;（可以全局使用）
   • 默认变量 $varName: value !default;（根据需求来覆盖：重新声明即可）
   • 特殊变量 如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用

   $borderDirection: top !default; 
   .border-#{$borderDirection}{
       border-#{$borderDirection}:1px solid #ccc;
   }
   

   • 全局变量 在变量值后面加上!global即为全局变量。(这个目前还用不上,等待新版本的sass设计好全局变量和局部变量的问题)
   • 多值变量 list map (看例子)

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

5. 嵌套(Nesting)
   • 选择器嵌套：在一个选择器中嵌套另一个选择器来实现继承
   • 属性嵌套：属性拥有同一个开始单词...可以这么写

.fakeshadow {
    border: {
        style: solid;
        left: {
          width: 4px;
          color: #888;
        }
        right: {
          width: 2px;
          color: #ccc;
        }
    }
}

- @at-root sass3.3.0中新增的功能，跳出所有的被嵌套选择器
- @keyframes @media 等...

6. 混合(mixin): 使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开(注意不用逗号的可能是一个list参数)，也可以给参数设置默认值。声明的@mixin通过@include来调用

    <!--sass style-->
   @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
       border-bottom:$border;
       padding-top:$padding;
       padding-bottom:$padding;  
   }
   .imgtext-h li{
       @include horizontal-line(1px solid #ccc);
   }
   .imgtext-h--product li{
       @include horizontal-line($padding:15px);
   }
   
   <!--to css style-->
   .imgtext-h li {
       border-bottom: 1px solid #cccccc;
       padding-top: 10px;
       padding-bottom: 10px;
   }
   .imgtext-h--product li {
       border-bottom: 1px dashed #cccccc;
       padding-top: 15px;
       padding-bottom: 15px;
   }
   

7. 继承:选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用关键词@extend，后面紧跟需要继承的选择器。
   占位选择器%：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

8. 内置函数：用的最多应该是颜色函数（lighten减淡和darken加深，其调用方法为lighten($color,$amount)和darken($color,$amount)）

9. 自定义函数: @fuction，@return

   $baseFontSize:      10px !default;
   $gray:              #ccc !defualt;        
   
   // pixels to rems 
   @function pxToRem($px) {
     @return $px / $baseFontSize * 1rem;
   }
   
   body{
     font-size:$baseFontSize;
     color:lighten($gray,10%);
   }
   .test{
     font-size:pxToRem(16px);
     color:darken($gray,10%);
   }
   

10. 运算：对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算

11. 条件语句 @if @else if @else ;
    三目运算：if($condition, $if_true, 三个参数分别表示：条件，条件为真的值，条件为假的值。

``` css
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}
```

12. for循环
    @for $var from <start> through <end>
@for $var from <start> to <end>
    $i表示变量，start表示起始值，end表示结束值
    这两个的区别是关键字through表示包括end这个数，to则不包括end这个数。

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

//to css style 
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}
```

13. each循环 (可以参考css精灵生成的sass代码，雷同呢~~)
    @each $var in <list or map>
    $var表示变量，list和map表示list类型数据和map类型数据

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

//css style 
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
```

``` css
//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; 
}
```

14. 列表项