sass入门

　　什么使sass呢？学过变成语言的人都知道，它不是一种编程语言！

　　我们知道，css基本上不是程序员的工具，因为它很麻烦，没有变量，没有条件语句，而只是一行行的单纯的描述，非常的不方便！正基于此，有人开始为了更方便地编写css来给css加入了编程元素，这就是“css预处理器(css proprocessor)”-----用一种专门的编程语言来设计样式，然后经过编译生成正常的css文件。

　　当然，css预处理器不仅仅有sass还有less，这两个css预处理器都非常流行，这里我们先来认识sass。

　　补充：sass文档1（英文版）

　　　　　sass文档2（中文版）

　说明：这里的部分内容参考了阮一峰老师的博客，地址为：　http://www.ruanyifeng.com/blog/2012/06/sass.html。

第一部分： sass安装与使用、文件介绍

　　我们可以下载koala,这是国人制作的一款可以编译sass、less的软件，我们可以先在sublime编译器中进行编译，然后使用koala生成css文件即可。

　　为了让less在sublime中高亮显示，可以在这里下载。

　　为了让sass在sublime中高亮显示，可以在这里下载。

　　上面两者得到后解压缩放在sublime的Preference下面的browse packages中并重启sublime即可。（当然高亮显示的前提是我们需要先将其保存为相应的文件）

　　sass实际上有两种文件名，一个是.sass结尾，另一个是.scss结尾。目前我么多用后者，因为前者形式的sass不好用，其语法是类似于ruby的语法。而.scss中使用的大括号，对于前端而言使用会更好。

　　如果不使用koala，也可以使用ruby来编译sass文件。　http://www.ruby-lang.org/zh_cn/downloads/ 这里可以下载ruby。

第二部分： sass基本用法。

　　1.变量

　　我们知道，css是没有变量的，而变量就是sass强大之处了。sass允许使用变量，所有的变量使用$开头。如下所示：

$size:15px;
div{
    font-size:$size;  
}

可以看出，这里$size时变量，变量必须使用$开头。

　　如果变量需要镶嵌在字符串中，就需要写在#{}之中。

$side:left;
div{
    border-#{$side}-radius:5px;
}

2.计算功能

　　在sass代码中，我们可以使用计算功能（非常方便！！这在css中是完全不可能的）。如下所示：

$weight:50px;
div{
    width:(100px/2);
    height:(50px-30px);
    font-size:$weight/5;
}

经过考拉编译之后，如下所示：

div {
  width: 50px;
  height: 20px;
  font-size: 10px; }

需要注意的是在scss代码中 100px/2 以及 50px -30px 都需要加上括号，这样编译出来的结果才不会有问题。

3.嵌套

　　sass允许在代码中使用选择器嵌套。这在css中是绝对不可以的，所以在css中写有嵌套关系的样式是非常麻烦的一件事情。

　　下面是一个例子：

div{
    h1{
        font-size:50px;
    }
    a{
        display:block;
        margin:15px;
    }
    &:hover{
        background:red;
    }
    border:{
        color:red;
        style:solid;
    }

}

　　经过考拉编译之后得到的代码如下：

div {
  border-color: red;
  border-style: solid; }
  div h1 {
    font-size: 50px; }
  div a {
    display: block;
    margin: 15px; }
  div:hover {
    background: red; }

/*# sourceMappingURL=text.css.map */

通过上面的例子可以看出：

考拉编译后会自动缩进
编译的css代码不再是嵌套关系
我们可以使用&(注意：是和号不是美元)引用父元素。
对于属性border-color和border-style我们也可以使用嵌套！！

4.sass注释

　　sass中共有三种注释方法。

　　其一：标准的css注释 /* this is a explanation */ 经过编译后仍会保留

　　其二：单行注释 // this is a comment 经过编译后不再存在

　　其三：重要注释 /*! this is an importantent explanation */ 该注释就算压缩也会被保留，通常用于声明版权信息。

　　举例如下：

sass代码如下：

div{
    h1{
        font-size:50px;
    }
    /*! this is an important explanation */
    a{
        display:block;
        margin:15px;
    }// this is for a.
    &:hover{
        background:red;
    }
    /* we can use this for explanation */
    border:{
        color:red;
        style:solid;
    }

}

经过考拉编译后如下：

div {
  /*! this is an important explanation */
  /* we can use this for explanation */
  border-color: red;
  border-style: solid; }
  div h1 {
    font-size: 50px; }
  div a {
    display: block;
    margin: 15px; }
  div:hover {
    background: red; }

我们可以看到使用//注释的已经不见了。其他两个仍在。

如果我们将上面的css代码压缩，结果如下：

div{/*! this is an important explanation */border-color:red;border-style:solid}div h1{font-size:50px}div a{display:block;margin:15px}div:hover{background:red}

如果我们将上面的sass代码压缩，结果如下：

div{h1{font-size:50px}/*! this is an important explanation */a{display:block;margin:15px}// this is for a. &:hover{background:red}border:{color:red;style:solid}}

我们发现无论如何：/*! */注释会永久存在。

（js css在线压缩工具：http://tool.oschina.net/jscompress/）

第三部分：sass代码重用

　1.继承

　　这个功能非常强大，它允许我们在一个选择器中继承另外一个选择器，使用@extend即可实现继承，举例如下：

$myColor:red;
.father{
    display:none;
    width:100px;
    height:(30px/2);
    color:$myColor;
}

.son{
    @extend .father;
    font-size:100px;
}

经过考拉编译之后如下：

.father, .son {
  display: none;
  width: 100px;
  height: 15px;
  color: red; }

.son {
  font-size: 100px; }

于是我们发现son完全继承了father，并在father的基础上添加了自己的属性font-size;

2.Mimin

　　这个功能允许我们重用代码块。使用@min命令可以定义一个代码块。如下所示：

@mixin myCss{
      display:none;
      100px;
}

　　使用@include命令就可以调用这个代码块：

.class{
    @include myCss;
    height:100px;
}

　　对于mixin而言，其更为重要的功能是可以指定参数和缺省值。

如下所示：

@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

这样我们在使用的时候就很方便了，比如：

#navbar li { @include rounded(top, left); }
　　#footer { @include rounded(top, left, 5px); }

当然，重用的次数越多，就会显得越高效。

3.颜色函数

　　这一部分的知识点比较多，暂时用不到。

4.插入文件

　　插入文件可以使用@import命令。　

@import "css/filename.scss";

注意：这里我们插入的是一个scss文件。

　　如果插入的是css文件，如下所示：

@import "css/reset.css";

第四部分：条件语句、循环语句和函数

　　1.条件语句

　　我们可以使用@if和@else：

@if lightness($color) > 30%{
    background-color:#999;
}@else {
    background-color:#ccc;
}

　　2.循环语句

　　sass支持for循环、while循环、each。

　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} {  2em * $i; }
　　　　$i: $i - 2;
　　}

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

我们发现如果通过@each这个循环来引入大量的照片会简洁高效的多！！！

3.自定义函数

　　我们还可以使用@function 来定义函数，并且可以传入参数，如下所示：

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

　　竹杖芒鞋轻胜马，谁怕，一蓑烟雨任平生。