SCSS安裝與常用語法

1.去http://ruby.taobao.org/下載

2. 安裝ruby 

3.安裝成功

 

4.在ruby環境下安裝sass,操作如下："gem install sass"

 

5.SASS提供四個編譯風格的選項：

　　* nested：嵌套縮進的css代碼，它是默認值。

　　* expanded：沒有縮進的、擴展的css代碼。

　　* compact：簡潔格式的css代碼。

　　* compressed：壓縮后的css代碼。

　　例如：sass --style compressed test.sass test.css

 

6.讓SCSS監控CSS，兩種用法,操作： 　　

　　1.監控一個SCSS文件: scss --watch scss:css

      在命令行用CD命令進到要操作的文件夾  ,比如說是e:\adine\html
      要CD 到html文件夾scss --watch scss:css 如圖：　　

　　

　　每次打命令行是一件很麻煩的事情，為了快捷可以建一個后綴名為.bat的文件，操作：

     要操作的文件夾如e:\adine\html，在HTML文件夾里面新建一個名為current_watch_scss.bat的文件。在這個文件里面加上

     scss --watch scss:css 

　　這樣每次雙擊這個文件夾，就會自動監控CSS文件了 

 

　　2.監控指定的某個文件：

　　.比如說html文件夾scss下面的ie.scss要被監控

　　scss --watch scss/ie.scss:css/ie.css 

 

SCSS語法介紹：

1.  Variables (變量): scss的變量與JS的相似以$開頭：例如右邊的SCSS生成后的CSS

 2. Nesting(嵌套)：scss選擇器的嵌套功能減少了很多重復的代碼，你如果是這么寫.那就是你已經意識到你在寫一組你能控制的結構了 

 

3. mixin(混入)：@mixin 類似JS寫好的一個函數, @include是調用一個寫好的函數。例：

4. extend(繼承)：@extend可以讓一個選擇器繼承另一個選擇器的屬性 ;

5. SCSS生成動態選擇器語法：如圖

 完！！！！！！