Sass使用總結

Sass

• 一種css預處理器，將css由描述語言轉爲編程語言，而後再編譯成css。相似的還有less、stylus，less和sass很早前就已經開始使用了，stylus我後面再去學習比較(定個時間：2017.03底前花一天時間學習下)。
• 基於ruby編寫。
• scss和sass兩種後綴名的區別：.sass是不使用花括號和分號";"的， .scss能夠使用，二者編譯後的實現是相同的， 可是.scss進行css書寫更合習慣。

安裝和編譯

1.環境上須要先安裝ruby

複製代碼

// 安裝sass, 而後就能夠使用了 gem install sass

複製代碼

2.編譯

• sass demo.scss demo2.css //指定文件名
• 可指定輸出的css排版風格（我通常不設置，只用默認的nested，壓縮的話用壓縮工具就好了）： 語法： sass --style expanded demo.scss demo2.css
  1. nested：嵌套縮進的css代碼，它是默認值。
  2. expanded：沒有縮進的、擴展的css代碼。
  3. compact：簡潔格式的css代碼。
  4. compressed：壓縮後的css代碼。線上使用。
• 每次改變sass文件都要編譯是很煩的事情， 全部自動化是必不可少的。構建工具固然是最好的選擇，後面我整理好了再引入介紹，先使用sass自帶的監控語法：**sass --watch demo.scss demo2.css ** ， 最便利的固然是能夠編譯和輸出指定文件夾內的css文件， sass --watch src/.scss dist/.css