SASS

• 配置環(huán)境
  sass是基于Ruby;
  安裝Ruby，在命令行輸入以下命令
  gem install sass
• 編譯

SASS文件就是普通的文本文件，里面可以直接使用CSS語(yǔ)法。文件后綴名是.scss，意思為Sassy CSS。

• 基本語(yǔ)法
• 變量

//sass允許使用變量，所有變量以$開(kāi)頭。
　　$operator : #1875e7;　
　　div {
　　　color : $operator;
　　}
      $side : left;
//如果變量需要鑲嵌在字符串之中，就必須需要寫(xiě)在#{}之中。
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

• 計(jì)算功能

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

• 嵌套

//SASS允許選擇器嵌套。比如，下面的CSS代碼：
　　div h1 {
　　　　color : red;
　　}
//可以寫(xiě)成：
　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}
//屬性也可以嵌套，比如border-color屬性，可以寫(xiě)成：
　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}
//注意，border后面必須加上冒號(hào)。
//在嵌套的代碼塊內(nèi)，可以使用&引用父元素。比如a:hover偽類(lèi)，可以寫(xiě)成：
　　a {
　　　　&:hover { color: #ffb3ff; }
　　}

• 注釋
  同javascript
• 代碼的重用
• 繼承

.exception{
              border:1px #000 solid;
}
.operator{
              @extend .exception;
}