CSS预处理器SASS用法和koala工具的使用

    最近在学习前端的时候，发现了一个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允许使用变量，所在变量以$开头

1$color_blue :#1875e7;
2div{
3color : $color_blue;
4}

如果变量要在css的属性中出现的话，就必须需要写在#{}中

1$side : left;
2 
3.box{
4border-#{$side}:5px solid #f5f5f5;
5}

二、计算功能

SASS可以在代码中做运算

1.box{
2margin:(14px/2);
3top :50px+30px;//当前这些值还可以定义变量
4}

三、嵌套

SASS允许选择器嵌套

1ul{
2  li{
3    a{
4       color :#dedede;
5     }
6  }
7}
8/*编释以后的代码为*/
9ul li a { color : #dedede;}

    属性也可以嵌套，比如border-color属性，但是border后面必须加上冒号

1p{
2 
3  border:{
4     color :#dedede
5  }
6 
7}

在嵌套的代码中，也可以用&符号引用父元素，

1ul{
2  li{
3 
4    a{
5       &:hover{ color:#dedede}
6     }
7   }
8 
9}

四、代码的注释

SASS共用两种注释

标准的CSS注释/* ... */会保留到编译后的文件中     单行注释//…… 只保留在SASS的源文件中，编译后被省略     重要注释如版权之类的/*! .......*/

五、代码的重用

    5.1 继承

    SASS允许一个选择器继承另一个选择器，语法( @extend  类名)

1.class_one{
2  line-height:30px;
3}
4 
5.class_two{
6   @extend.class_one;
7   font-size :25px
8}

5.2Mixin      重用代码块 语法   @mixin 定义一个代码块

1@mixin left{
2 
3float: left;
4   margin-left :10px
5}

使用@include命令可以调用mixin

1.box{
2 
3   @include left;
4}

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

1@mixin left( $right_v:10px){
2 
3float: left;
4   margin-right : $right_v;
5 
6}

那么在使用的的时候，可以根据项目的不同设置不同的值

1.box{
2  @include left(30px);
3}

5.3、插入文件

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

1@import"path/filename.scss"
2@improt"body.css"

六、高级用法

6.1、条件语句

@if可以用来判断

1span{
2  @if1+1==2{border:1px solid;}
3  @if5<3{border:2px dotted;}
4}

还可以加上@else命令

1@if lightness( $color )>30%{
2  background-color :#000;
3}@else{
4  background-color : $fff;
5}

6.2、循环语句

SASS－for循环

1@for $i from1 to 10{
2   .border-#{$i}{
3     border:#{i}px solid blue;
4   }
5}
6//同时也支持while循环
7$i :6;
8@while $i >0{
9  .item-#{$i}{
10     width :2px* $i;
11   }
12   $i: $i -2;
13}

@each 命令，作用与for类似

1@each $member in a, b, c, d{
2 .#{$member}{
3    background-image : url("/image/#{$member}.jpg");
4 }
5 
6}

6.3、自定义函数

SASS允许用户编写自己的自定义函数

1@functiondouble($n){
2  @return $n *2;
3}
4  
5#sidebar {
6  width :double(5px);
7}