sass和less的區別

%就是我發表於2018-08-10

sass

  1. 相容所有版本的css
  2. 專業CSS擴充套件語言
  3. 使用變數
  4. 巢狀CSS規則
  5. 匯入SASS檔案
  6. 靜默註釋
  7. 混合器
  8. 使用選擇器繼承來精簡CSS

less

  1. Less 是一門 CSS 預處理語言,它擴充套件了 CSS 語言,增加了變數、Mixin、函式等特性,使 CSS 更易維護和擴充套件。

  2. 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不支援。



相關文章