sass
- 相容所有版本的css
- 專業CSS擴充套件語言
- 使用變數
- 巢狀CSS規則
- 匯入SASS檔案
- 靜默註釋
- 混合器
- 使用選擇器繼承來精簡CSS
less
Less 是一門 CSS 預處理語言,它擴充套件了 CSS 語言,增加了變數、Mixin、函式等特性,使 CSS 更易維護和擴充套件。
Less 可以執行在 Node 或瀏覽器端。
Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言,語法跟css一樣(但多了些功能),比css好寫,而且更容易閱讀。Sass語法類似與Haml,屬於縮排語法(makeup),用意就是為了快速寫Html和Css。
Less是一種動態樣式語言. 將CSS賦予了動態語言的特性,如變數,繼承,運算, 函式. LESS 既可以在客戶端上執行 (支援IE 6+, Webkit, Firefox),也可一在服務端執行 (藉助 Node.js)。
區別:
(1)Sass是基於Ruby的,是在服務端處理的,而Less是需要引入less.js來處理Less程式碼輸出Css到瀏覽器,也可以在開發環節使用Less,然後編譯成Css檔案,直接放到專案中,也有Less.app、SimpleLess、CodeKit.app這樣的工具,也有線上編譯地址。
(2)變數符不一樣,less是@,而Scss是$,而且變數的作用域也不一樣,後面會講到。
(3)輸出設定,Less沒有輸出設定,Sass提供4中輸出選項:nested, compact, compressed 和 expanded。
(4)Sass支援條件語句,可以使用if{}else{},for{}迴圈等等。而Less不支援。