sass用法

sass是一种css的开发工具，提供了许多便利的写法。
sass的文件后缀名为.scss，意思为Sassy CSS。
sass提供四个编译风格的选项，

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

基本用法：

变量

所有变量以$开头，这个最常用。

$red:#f00;
div{
    color : $red;
}

如果变量镶嵌在字符串中，则要写在#{}中。

$side : left;
.rounded{
    border-#{$side}-radius : 5px;
}

---

计算功能

sass允许在代码中使用算式

body{
    margin:(14px/2);
    top:50px+100px;
}

---

嵌套

sass允许选择器嵌套

    // css:
    div h1{
        color:red;
    }
    // sass:  讲道理css不是也可以这样写的么。。- -..
    div{
        h1{
            color:red;
        }
    }

属性可以嵌套（嗯这个厉害了这个css不行。）

p{
    border:{
        color:red;
    }
}
// 类似于
p{
    border-color:red;
}

嵌套的代码块内可以用&引用父元素。这个也炒鸡好用。

// css
a{
    color:#f00;
}
a:hover{
    color:#ff0;
}

// sass
a{
    color:#f00;
    &:hover{
        color:#ff0;
    }
}

---

注释

标准的css注释/* comment */会保留到编译后的文件。
单行注释 //comment只保留在sass源文件中，编译后省略。
/*后面加一个感叹号，表示为这个是重要注释，压缩模式编译后也会保留。

---

继承

sass允许一个选择器继承另一个选择器。（嗯，炒鸡好用）

.class1{
    color:#f00; 
}
.class2{
    @extend .class1;
    font-size:14px; 
}

---

Mixin

Mixin是可以重用的代码块。

//定义一个代码块
@mixin left{
    float:left;
    margin-left:10px;   
}

//使用@include命令调用mixin
div{
    @include left;  
}

然后这个mixin还可以指定参数，真是6的不行。。

@mixin left($value:10px){
        float:left;
        margin-left:$value;
}

div{
    @include left(20px);    
}

---

颜色函数

SASS提供了一些内置的颜色函数以便生成系列颜色。

lighten(#cc3,10%)  //
draken(#cc3,10%)....

插入文件

@import命令用来插入外部文件

@import 'path/filename.scss';

如果插入的是.css文件则等同于css的import命令。

---

高级用法

条件语句

@if可以用来判断，配套的还有@else命令。

p{
    @if 1+1 == 2 {border:1px solid;}
}

@if lightness($color) > 30% {
    background-color : #000;    
} @else {
    background-color: #fff; 
}

循环语句

sass支持for循环，while循环，each命令。

@for $i from 1 to 10 {
    .border - #{$i} {
        border: #{$i}px solid blue;
    }
}

$i : 6;
@while $i > 0 {
    .item-#{$i} : {
        width : 2em * $i;
    }
    $i : $i -2
}

@each $member in a,b,c,d {
    .#{$member}{
        background-image : url('/image/#{$member}.jpg')
    }   
}

自定义函数

@function double($n){
    @return $n * 2;    
}
#side{
    width: double(5px)  
}

---

阮大师教程地址：http://www.ruanyifeng.com/blog/2012/06/sass.html