sass基础

sass新概念：变量  混合  嵌套  选择器的继承。

sass没有分号和大括号。

sass继承：

sass允许一个选择器继承另一个选择器。

　.class1 {

　　　　border: 1px solid #ddd;

　　}

　.class2 {

　　　　@extend .class1;

　　　　font-size:120%;

　　}

Mixin重用代码块

使用@mixin命令，定义一个代码块。

　　@mixin left {

　　　　float: left;

　　　　margin-left: 10px;

　　}

使用@include命令，调用这个mixin。

　　div {

　　　　@include left;

　　}

mixin的强大之处，在于可以指定参数和缺省值。

　@mixin left($value: 10px) {

　　　　float: left;

　　　　margin-right: $value;

　　}

使用的时候，根据需要加入参数：

div {

　　　　@include left(20px);

　　}

循环语句：

　@for $i from 1 to 10 {

　　　　.border-#{$i} {

　　　　　　border: #{$i}px solid blue;

　　　　}

　　}

自定义函数：

@function douse($n){

@return $n*2;

}

#sidebar{

width: douse(5px);

}