SASS和LESS等優缺點對比，使用方法總結 (筆記大全)

sass優點:

用戶多，更容易找到會用scss的開發，更容易找到scss的學習資源；
可編程能力比較強，支持函數，列表，對象，判斷，循環等；
相比less有更多的功能；
Bootstrap/Foundation等使用scss；
豐富的sass庫：Compass/Bourbon；

sass缺點:

在公司內部安裝node-sass會失敗，需要使用cnpm或者手工安裝

less優點

可以在瀏覽器中運行，實現主題定制功能；

less缺點

編程能力弱，不直接支持對象，循環，判斷等；
@variable 變量命名和css的@import/media/keyframes等含義容易混淆；
mixin/extend的語法比較奇怪；
mixin的參數如果遇到多參數和列表參數值的時候容易混淆；

SASS是CSS的預處理器，通俗點說就是一種樣式語言，語法上兼容CSS，並加入CSS沒有的一些特性。最終，SASS還是要編譯為CSS才能運行

LESS

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
Less 可以運行在 Node 或瀏覽器端。

變量（Variables）

These are pretty self-explanatory:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

混合（Mixins）

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

嵌套（Nesting）

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
==》
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

運算（Operations）

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

為了與 CSS 保持兼容，calc() 並不對數學表達式進行計算

函數（Functions）

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Less 內置大量函數（image-size("file.png")，image-width("file.png")等等，用的時候查AI）。
if 函數
@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), darken(@some, 10%), black);
}

作用域（Scope）

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

導入（Importing）

“導入”的工作方式和你預期的一樣。你可以導入一個 .less 文件，此文件中的所有變量就可以全部使用了。如果導入的文件是 .less 擴展名，則可以將擴展名省略掉：

@import "library"; // library.less
@import "typo.css";