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";