SCSS

变量

$color-red: red;

color {
    background-color: $color-red;
}

mixin

mixin 基本用法

@mixin color-blue {
    color: blue;
}

button {
  @include color-blue
}

mixin 传一个参数

@mixin btn($pL:3px){
    -webkit-border-radius: $pL;
     border-radius: $pL; 
}

button{
    @include btn(10px)
}

mixin 传多个参数

@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);
}

extend

基础知识

.box1,.box2 {
   width: 360px;
   border:1px solid red;
   background-color: #fdd;
   border-width: 3px;
}       
.box2{
   border-width: 5px;
}

// <span class="box1"></span>
// <span class="box2"></span> 会用到两个class中的样式

简单的用法

.box1 {
   width: 360px;
   border:1px solid red;
   background-color: #fdd;
   border-width: 3px;
}       
.box2{
   @extend .box1
   border-width: 5px;
}

//就会生成基本用法里的css

高级继承

.hoverlink {
     @extend a:hover;
}
a:hover {  
   text-decoration: underline;
}

继承多个

    .one {
        width:100px;height:100px;
    }
    .two {
        /*继承的样式*/
        @extend .one;
        @extend .three;
        /*独立的样式*/
        background:red;
        border:5px solid #000;
    }
    .three {
        padding:10px;
    }

编译成

    .one, .two {
      width: 100px;
      height: 100px;
    }
     
    .two {
      background: red;
      border: 5px solid #000;
    }
     
    .three, .two {
      padding: 10px;
    }

占位符

    //SCSS
    %mar {
      margin: 5px;
    }
    %pad{
      padding: 5px;
    }
     
    .btn {
      @extend %mar;
      @extend %pad;
    }
     
    .block {
      @extend %mar;
     
      span {
        @extend %pad;
      }
    }

编译成

    //CSS
    .btn, .block {
      margin-top: 5px;
    }
     
    .btn, .block span {
      padding-top: 5px;
    }

值列表

运算

除法

    p {
      font: 10px/8px;             // 纯 CSS，不是除法运算
      $width: 1000px;
      width: $width/2;            // 使用了变量，是除法运算
      width: round(1.5)/2;        // 使用了函数，是除法运算
      height: (500px/2);          // 使用了圆括号，是除法运算
      margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
   font: #{$font-size}/#{$line-height};    
    }

编译成

    p {
      font: 10px/8px;
      width: 500px;
      height: 250px;
      margin-left: 9px; 
      font: 12px/10px
      }

颜色运算

    p {
      color: #010203 * 2;  // 01 * 2 ;02 * 2; 03 * 2 => 020406
    }

字符串运算（见 scss_字符串相加）

逻辑运算符 （见scss_逻辑运算符）

怎么编译呢？

$ gem install sass
$ sass test.scss test.css

SASS提供四个编译风格的选项：

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

生产环境当中，一般使用最后一个选项。

　　sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

　　// watch a file
　　$ sass --watch input.scss:output.css
　　// watch a directory
　　$ sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。