Sass初涉

經歷數不清日月的頹廢之後，決定重新堅持自己的前端之路，說實話，到現在 ，對前端是很迷茫的，前端這個行業，真是應了那句話，“學了不一定有用”，更新換代太快，基礎已打牢。從昨天開始我開始深入學習前端，JS方面學習函數式編程和模塊化（require，commentJS），css學習預處理語言sass，框架方面接觸facebook的react。

那麼今天便小小研究了一下sass
對於浸潤了很多編程語言的我（。。。），sass的基礎語法還是不是特別難的，但是他的特殊語法（自己的獨特性方面）還是需要去實踐記住。
一、sass的安裝
sass是一個Ruby編寫的（目前）世界上最成熟、穩定禾慶大的CSS擴展語言，當然通過Ruby安裝，去Ruby官網下對應安裝包，安裝時注意選擇自動添加path路徑

之後使用Ruby的管理工具gem下載sass
  打開cmd 輸入： gem install sass即可
  更新與刪除 gem uninstall/update sass

一、Sass基礎篇
①、命令編譯(cmd)
sass <scssc存儲路徑>/test.scss:<轉碼後css路徑>/test.css
//sass有很多參數，例如使用--watch可動態捕獲scss文件的改變並重新轉碼
sass --watch style.scss:style.css

②、也可以使用GUI編譯或者自動化編譯
GUI推薦
Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 
自動化編譯見慕課網
http://www.imooc.com/code/6380
③、(重要)sass有兩個常見錯誤
第一個是因爲字符編譯引起的。Sass不支持“GBK”編譯，所以創建Sass文件時，將文件編碼設定爲“utf-8”
第二個是因爲路徑中的中文字符引起的(***)
④、Sass有四種輸出模式

sass --watch style.scss:style.css nested //嵌套
sass --watch style.scss:style.css expanded //展開
sass --watch style.scss:style.css compact //緊湊
sass --watch style.scss:style.css compressed //壓縮

效果一實驗便知，在此不贅述。。。推薦使用compressed
⑤、Sass變量
類似PHP，使用美刀符號

$color :red; /*普通變量*/
$color:red !default; /*默認變量*/
//8*全局變量和局部變量類似與C語言*/

⑥、嵌套
選擇器嵌套(不建議使用)

<div>
<nav>
    <a>ffff</a>
</nav>
</div>
sass便可以如此寫
nav{ /*看不懂就算了*/
    a{}
    div &{}
}

屬性嵌套

.box{
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
sass書寫
.box{
    border{
        top:1px solid red;
        bottom:1px solid green;
    }
}

僞類嵌套

.clearfix{
    &:before{}
    &:after{}
}

嵌套初看上去挺有用的，但我感覺很大意義上有點廢(個人觀點)
⑦、混合宏，繼承，佔位符
    混合宏(優點在於可以帶參數)

@mixin border{  /*聲明*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
/*可以帶參數*/
@mixin border($radius/*可以帶默認值*/){  //聲明
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
/*複雜的參數宏 如果帶多個參數可以用...替代*/
/*調用。引用@include*/
.button{
    @include border-radius(5px);
}

但是混合宏的缺點也是很明顯的，生成冗餘的代碼塊。
    擴展/繼承(@expand)

/*SCSS*/
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
翻譯出來
/*CSS*/
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

  佔位(%placehoder，@expand引用)

%test{margin:50px;}
div{@expand %test;

⑧、插值 #{}
插值目前的限制還非常大，待補充
⑨、註釋可使用//行註釋，/*段註釋*/
有數據類型，大致與C語言相似，但是多出了顏色類型和值列表
⑩、支持四則運算(單位要相同)
加： 特殊之處在於 “+”，即可以連接字符串也可以連接字符屬性

$content: "Hello" + "world!"; /*content :"Helloworld!"*/
$e-resize:e+-resize;/*$e-resize:e-resize;*/

除：

/*不能同時帶單位*/
p {
  font: 10px/8px;             /* 純 CSS，不是除法運算*/
  $width: 1000px;
  width: $width/2;            /* 使用了變量，是除法運算*/
  width: round(1.5)/2;        /* 使用了函數，是除法運算*/
  height: (500px/2);          /* 使用了圓括號，是除法運算*/
  margin-left: 5px + 8px/2px; /* 使用了加（+）號，是除法運算*/
}

可進行顏色計算(分段計算兩個數一組)

$color: #010203 + #040506; /*#050709*/
$color: #010203 *2; /*#020406*/