sass基本用法（浅谈sass系列二）

这一篇主要是接着上一篇接着说sass，这一篇主要说说sass的基本用法。

变量

1. sass允许使用变量，所有的变量以$开头。如果变量需要镶嵌在字符串中，需要放在#{}中。

//使用变量
$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}
//字符串中使用变量
$side : left;

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

2. 计算功能
   sass允许使用算式

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

3. 嵌套（未完待续…）
4. 注释
   这里的注释和我们常用的注释有一些区别，注释主要分成三种
   a. 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
   b. 单行注释 // comment，只保留在SASS源文件中，编译后被省略。
   c. 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
5. 继承
   一个选择器继承另一个选择器。是不是有一点点面向对象的味道?

	.class1 {
　　　　border: 1px solid #ddd;
　　}

//class2继承class1，就要使用@extend命令
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

6. Mixin
   这个有一点点函数的味道，主要的作用的是代码重用。

//使用@mixin命令，定义一个代码块。
@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
//使用@include命令，调用这个mixin。
div {
　　　　@include left;
　　}

更像函数的地方：指定参数和缺省值

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
//使用时传入参数
div {
　　　　@include left(20px);
　　}

7. 颜色函数)（待说明）
   SASS提供了一些内置的颜色函数，以便生成系列颜色。

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

8. 插入文件
   @import命令，用来插入外部文件。

　@import "path/filename.scss";
　@import "foo.css";

9. 允许使用if …else/循环语句
10. 自定义函数(和上面的Mixin有一点相似，具体什么时候用什么东西要自己斟酌)

　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}