最近在学习前端的时候，发现了一个SASS（CSS预处理器），感觉在前端布局写css样式来说是相当强大，效率又高，在用到SASS的时候感觉很爽。
首先说一下传统的CSS，在程序员的眼里感觉是一个很麻烦的东西，没有变量，也没有运算，还没有条件语句，感觉写的相当费事。 在人们都感觉费事的同时，真有牛人把CSS加入了编程的元素，这就是（CSS预处理器），是一种专门的编程语言，进行网而设计，然后在编译成正常的CSS文件，但是CSS预处理器中有很多，今天就说一下SASS。
在百度SASS以后，在百度百科中看到了SASS的安装： 如下：SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。假定你已经安装好了Ruby，接着在命令行输入下面的命令：gem install sass然后，就可以使用了。 今天咱们在这里就跳过这一步，在我编程的过程中感觉越省事越好。推荐大家使用一款使用工具－Koala. 首页说一下Koala, koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。下载地址：http://koala-app.com/index-zh.html 使用这款工具也相当省事，安装成功以后，打开此工具，在你的项目目录下创建css目录，然后在css目录下创建style.scss ,然后装css文件夹直接拖到工具内，接着用sublime Text编辑style.scss,工具自动会编释一份style.css文件，真正在网页中使用的是style.css文件。
在使用koala工具的时候，在写样式中添加汉字的时候会提示错误，解决方法：找到工具的安装目录，然后找到以下目录/koala/rubygems/gems/sass-3.4.9/lib/sass/目录有一个engine.rb文件，打开rb文件，在require底部添加
Encoding.default_external = Encoding.find('utf-8')
接着说一下SASS的书写规则和语法：
一、变量 SASS允许使用变量，所在变量以$开头
$color_blue :#1875e7;
div{
color : $color_blue;
}
如果变量要在css的属性中出现的话，就必须需要写在#{}中
$side : left;
.box{
border-#{$side}:5px solid #f5f5f5;
}
二、计算功能
SASS可以在代码中做运算
.box{
margin:(14px/2);
top :50px+30px;//当前这些值还可以定义变量
}
三、嵌套
SASS允许选择器嵌套
ul{
li{
a{
color :#dedede;
}
}
}
/*编释以后的代码为*/
ul li a { color : #dedede;}
属性也可以嵌套，比如border-color属性，但是border后面必须加上冒号
p{
border:{
color :#dedede
}
}
在嵌套的代码中，也可以用&符号引用父元素，
ul{
li{
a{
&:hover{ color:#dedede}
}
}
}
四、代码的注释
SASS共用两种注释
标准的CSS注释/* ... */会保留到编译后的文件中 单行注释//…… 只保留在SASS的源文件中，编译后被省略 重要注释如版权之类的/*! .......*/
五、代码的重用
5.1 继承
SASS允许一个选择器继承另一个选择器，语法( @extend 类名)
.class_one{
line-height:30px;
}
.class_two{
@extend.class_one;
font-size :25px
}
5.2Mixin 重用代码块 语法 @mixin 定义一个代码块
@mixin left{
float: left;
margin-left :10px
}
使用@include命令可以调用mixin
.box{ @include left; }
mixin的强大之处，在于可以指定参数和缺省值
@mixin left( $right_v:10px){ float: left; margin-right : $right_v; }那么在使用的的时候，可以根据项目的不同设置不同的值
.box{ @include left(30px); }5.3、插入文件
@import命令，用来插入外部文件
@import"path/filename.scss" @improt"body.css"六、高级用法
6.1、条件语句
@if可以用来判断
span{ @if1+1==2{border:1px solid;} @if5<3{border:2px dotted;} }还可以加上@else命令
@if lightness( $color )>30%{ background-color :#000; }@else{ background-color : $fff; }6.2、循环语句
SASS－for循环
@for $i from1 to 10{ .border-#{$i}{ border:#{i}px solid blue; } } //同时也支持while循环 $i :6; @while $i >0{ .item-#{$i}{ width :2px* $i; } $i: $i -2; }@each 命令，作用与for类似
@each $member in a, b, c, d{ .#{$member}{ background-image : url("/image/#{$member}.jpg"); } }6.3、自定义函数
SASS允许用户编写自己的自定义函数
@functiondouble($n){ @return $n *2; } #sidebar { width :double(5px); }
