SASS的简单用法

一、SASS的由来

由于CSS不是编程语言，没有变量，没有条件语句，编写起来费事，于是就有了css预处理器（css preprocessor），SASS就是其中之一。

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
二、SASS的安装及使用

1.  安装
      SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
 安装完成Ruby后，在命令行输入 gem instail sass （不同编辑器需要安装不同的插件来支持sass使用）
2.  使用
 SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。不同的编辑器可以通过安装相应的插件来实现scss文件的监听编译；
 SASS提供的四种编译风格
   * nested：嵌套缩进的css代码，它是默认值。
   * expanded：没有缩进的、扩展的css代码。
   * compact：简洁格式的css代码。
   * compressed：压缩后的css代码。

三、基本用法

1. SASS中允许使用变量，所有的变量以$开头

       例如 ：$color:red;
               div{
                   background:$color;
                }

 如果变量需要镶嵌在字符串中，就必须写在#{}中
 例如：$side: left;

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

2.计算功能
   SASS允许在代码中使用计算功能

   div{
          margin:(14px/2);
          top:40px + 50px;
          right:$var * 10%;
      }

3.嵌套(应用这种方法可以使代码结构更加清晰，层级分明)
 SASS允许选择器嵌套
  例如：

    div h2 {
               collor:$color;
          }
       可以写成：
          div {
               h2{
                    color:$color;
               }
          }

 属性嵌套 border 后面必须加 : 
      div{
           border:{
               color:red; 
           }
      }
 在嵌套的代码块中，可以使用&引用父元素。例如：a:hover 

    a{
               &:hover{color:$color;}
          }

4.注释：
SASS中有两种注释风格
1.标准的css注释/* comment */
2.单行注释 //comment 只保留在SASS原文件中，编译后被省略（使用这种注释优化测试中的代码，省去删除注释的麻烦）

四、代码重用

1. SASS允许一个选择器继承另一个选择器

 例如：

     .class1 {
               border:1px #000 solid;
          }
          .class2 {
               @extend .class1;
               font-size:120%;
          }

2.Mixin
Mixin有点类似与C语言中的宏（macro）是可以重复使用的代码块
使用@Mixin定义一个代码块；

    @Mixin left {
          float:left;
          margin-left: 10px;
     }

 使用@inclode命令，调用mixin

     div {
          @include left;
     }

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

     @mixin left($value:10px) {
          float:left;
          margin-left:$value;
     }

 指定的变量只能在内部使用，外部无法使用，如果指定有变量，还可以在调用的时候修改,如果没有定义变量则不可以修改。
 div {
     @include left(20px); 
 }
 用mixin方法生成浏览器前缀，

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

 调用 相当于JS中的函数，调用一个函数
 .#{navbar} li {@include rounded(top,left);}
 .#{footer} {@include rounded(top,left,5px)}

3.颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。

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

4.插入文件
@inport命令，用来插入外部文件

     @import "path/filename.scss";

 如果插入的是.css文件，则等同于css的import命令,利用css提供的外部链接功能与link相似

    @import "foo.css";