sass是什么？

基本定义

css预处理器，生成文件后缀scss，可以编译成css文件，被html引用，但不能替代css。

安装流程

1. 安装ruby，并设置环境变量
2. 安装sass， gem install sass
3. 基本命令行
   (1): 显示scss文件转化的css文件： sass t.scss;
   (2): 编译成对应css文件：sass t.scss t.css;
   (3): 编译成四种风格中的一种：sass --style compressed t.scss t.css
   (4): 监听文件或者目录，自动编译：sass --watch t.scss:t.css 或者 sass --watch app/t.css:pubic/stylesheet

四种编译风格

• nested：嵌套缩进的css代码，它是默认值。
• expanded：没有缩进的、扩展的css代码。
• compact：简洁格式的css代码。
• compressed：压缩后的css代码。

基本语法

$black:#000   //变量定义
border-#{$side}-radius: 5px;  //变量嵌套在字符串中 #{}
right:$argu*.3  //可以计算
div{a{...}};   //可以嵌套
p{border:{color:#000}}   //属性可以嵌套，需要用冒号
a{&:hover{color:#000}}  //可以用&引用父元素，
/*!重要注释，压缩会保留
*/

复用

1. 继承 @extend
.class2 {@extend .class1;}
2. Mixin 重用代码块
   @minxin 定义
   @include 调用

@minxin keymap($value: 10px){  //可以指定参数和缺省
    left：$value
}
div{
   @include keymap
}
//实例，用来生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

插入文件

@import 等同于css的 @import 命令

颜色函数

• lighten(#cc3, 10%) // #d6d65c
• darken(#cc3, 10%) // #a3a329
• grayscale(#cc3) // #808080
• complement(#cc3) // #33c

高级用法，添加函数写法

函数保留字需要加上@：@for
可以自定义函数

@function pow($x,$y){
  @if($x>$y){
    @for $i from 0 through 1{
      $x : 1;
    }
  }@else{
    $y:1;
  }
  @return $x+$y;
}
$res:pow(1,0)+px;
div{
  @if(true){
    font-size:$res;
  }@else{
    font-size: 10px;
  }
}

//编译结果
div {
  font-size: 1px; }

附录链接

1. sass在线转化器
2. sass中文入门教程
3. sass参考手册
4. sass官网语法（英文）
5. 阮一峰sass解读-参考