SASS的使用总结

一、简介：

    成熟、稳定、强大的专业级CSS扩展语言

二、特色：

• 兼容CSS
• 特性丰富
• 成熟
• 行业承认
• 社区庞大
• 框架（有无数的框架使用Sass构建。好比Compass，Bourbon，和Susy。）

三、安装：

    sass是基于Ruby语言开发而成，所以须要先安装Ruby。网上有不少安装教程，这里省略。。。

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言

四、编译器：

    koala（推荐）

五、语法：

（1）使用变量：

    sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就须要使用冒号(:)分隔开（就像CSS属性设置同样），若是值后面加上!default则表示默认值。

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}

（2）嵌套CSS规则

    选择器嵌套：

        在一个选择器中嵌套另外一个选择器来实现继承，从而加强了sass文件的结构性和可读性。

        在选择器嵌套中，可使用&表示父元素选择器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  li{
    float:left;
  }
  a{
    color: #fff;
    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

    属性嵌套：

        有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

（3）导入SASS文件：

    sass的导入(@import)规则和CSS的有所不一样，编译时会将@import的scss文件合并进来只生成一个CSS文件。可是若是你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件同样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

    全部的sass导入文件均可以忽略后缀名.scss。通常来讲基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候能够不写下划线，可写成@import "mixin"。

（4）静默注释：

    sass有两种注释方式，一种是标准的css注释方式/* */，另外一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。

（5）混合器：

    使用 @mixin 标识符定义，经过 @include 来使用混合器：

//sass style
//----------------------------
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}

//css style
//------------------------------
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

（6）选择器继承：

    经过 @extend 语法实现：

//sass style
//----------------------------
.error{
  color: red;
}
.msg{
  @extend .error;
  font-size: 20px;
}

//css style
//----------------------------------
.msg{
  color: red;
  font-size: 20px;
}

SASS和SCSS的关系与区别：

sass和scss实际上是一种东西，都是Sass的语法格式。scss是Sass3引入的新语法。二者不一样之处有如下两点：

一、文件扩展名不一样，Sass是以“.sass”后缀为扩展名，而Scss是以“.scss”后缀为扩展名。

二、语法书写方式不一样，Sass是以严格的缩进式语法规则来写，不带大括号（{}）和分号（；），而Scss的语法书写和咱们的CSS语法书写方式很是相似。

//Sass语法
$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color


//Scss语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}