Sass（scss）常用语法记录

1. sass与scss区别

SCSS 需要使用分号和花括号。

sass举例：
		#sidebar
		  width: 30%
		  background-color: #faa
scss举例：
	   	#sidebar {
			  width: 30%;
			  background-color: #faa;
		}

2. 变量（具有作用域）

以 $ 开头，后为变量名；

$red: #1875e7;　
div {
　color : $red;
}

加 !default为默认值（使用之前变量已赋值，就不用默认值，如果没有，则使用默认值）

$content:"softwhy.com";
$content: "antzone" !default;
#main {
  content: $content;
}

这时content值为softwhy.com。

3. 嵌套

在嵌套的代码块内，可以使用 & 引用父元素。

div {
　　hi {
　　  color:red;
　　}
　　&:hover { 
　　  color: #ffb3ff;
　　}
}

使用 @at-root 跳出选择器嵌套

  .parent{
     @at-root .child{
       color: gray;
     }
   }
  编译结果为 
  .child{
     color: gray;
   }

4.继承

使用 @extend命令：继承另外一个选择器所有的样式

.class1 {
　　border: 1px solid #ddd;
}
.class2 {
　　@extend .class1;
　　font-size:120%;
}

5.混合（mixin）

使用 @mixin命令，定义一个代码块。使用 @include命令进行调用。
进行代码重用，可传递参数。

@mixin border($vert, $horz, $radius: 10px) { //radius默认值为10px
　　border-#{$vert}-#{$horz}-radius: $radius;
　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#footer { @include border(top, left, 5px); }

6.运算

1. 条件语句（@if， @else）

@if $value> 3 {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

2. 三目判断
   语法为：if($condition, $if_true, $if_false) 。
   三个参数分别表示：条件，条件为真的值，条件为假的值。

$boolean:false;
.border{
	font-size:if($boolean,10px,20px)
}

4. 自定义函数

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

5. for循环，while循环，each循环
   参考文档：http://www.ruanyifeng.com/blog/2012/06/sass.html