Sass的浅谈
不知道大家开发网页样式，是用CSS呢，还是SASS呢。
CSS它并不是一种编程语言，你可以用它来开发网页，但是没法用它编程，意思就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西，它没有变量，也没有条件语句，只是单纯的描述，写起来相当费事。
一、SASS的定义
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省设计者的时间，使得CSS的开发，变得简单和可维护 。
二、SASS安装与使用
1.安装
SASS是Ruby语言写的，但是两者的语法没有。必须先安装Ruby，然后在安装SASS。
2.使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.sass，意思为Sassy CSS。
.sass文件需要转化为CSS代码。
SASS提供四个编译风格的选项：
*nested:嵌套缩进的CSS代码，它是默认值。
*expanded:没有缩进的、扩展的CSS代码。
*compact:简洁格式的CSS代码。
*compressed:压缩后的css代码。
生产环境中，一般使用最后一个选项进行编译。
sass --style compressed test.sass test.css
也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
//watch a file
sass --watch test.scss:output.css
//watch a directory
sass --watch app/css
三、基本用法
1.变量
SASS允许使用变量，所有变量以$开头。
$gray:#dcdcdc;
div{
color: $gray;
}
2.计算功能
SASS允许在代码中使用算式：
body{
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.嵌套
SASS允许选择器嵌套。
下面是css代码
div ul{
}
可以写成
div{
ul{
}
}
四、代码重用。
1.继承
SASS允许一个选择器，继承另一个选择器。比如，现有一个class。
.class{
border:1px solid #dcdcdc;
}
class2要继承class1，就要使用@extend命令：
.class2{
@extend .class1;
font-size:120%;
}
2.Mixin
Mixin有点像C语言的宏（macro），是可以重用代码块。
使用@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);
}
3.插入文件
@import命令，用来插入文件外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
五、高级用法
1.条件语句。
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
2.循环语句。
SASS支持for循环。
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
3.自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
