Sass.vs.Less | 簡介與比較

大家都不看的總集篇： 從零開始的大前端築基之旅(深刻淺出，持續更新～)
以爲不錯就順手點個贊吧

「我應該選擇哪一種CSS預處理器語言?」

什麼是CSS 預處理器？

CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲 CSS 增長了一些編程的特性，將 CSS 做爲目標生成文件，而後開發者就只要使用這種語言進行CSS的編碼工做。

爲何要使用CSS預處理器？

CSS僅僅是一個標記語言，不能夠自定義變量，不能夠引用。

CSS有具體如下幾個缺點：

• 語法不夠強大，好比沒法嵌套書寫，致使模塊化開發中須要書寫不少重複的選擇器；
• 沒有變量和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，致使難以維護。

預編譯很容易形成後代選擇器的濫用

使用預處理器的優勢

• 提供CSS層缺失的樣式層複用機制
• 減小冗餘代碼
• 提升樣式代碼的可維護性

Sass&Less

• Less （Leaner Style Sheets 的縮寫） 是一門向後兼容的 CSS 擴展語言。由於 Less 和 CSS 很是像，Less 僅對 CSS 語言增長了少量方便的擴展，學習很容易。

• sass，做爲」世界上最成熟、最穩定、最強大的專業級CSS擴展語言」。兼容全部版本的css，且有無數框架使用sass構建，如Compass，Bourbon，和Susy。

SASS版本3.0以前的後綴名爲.sass，而版本3.0以後的後綴名.scss。

Sass 和 Less 這類語言，其實能夠理解成 CSS 的超集，它們在CSS 本來的語法格式基礎上，增長了編程語言的特性，如變量的使用、邏輯語句的支持、函數等。讓 CSS 代碼更容易維護和複用。

但瀏覽器最終確定是只認識 CSS 文件的，它沒法處理 CSS 中的那些變量、邏輯語句，因此須要有一個編譯的過程，將 Sass 或 Less 寫的代碼轉換成標準的 CSS 代碼，這個過程就稱爲 CSS 預處理。

補充說明

ruby sass

Ruby Sass 是 Sass 的最初實現，可是 已經於 2019年 3 月 26 日將壽終正寢。咱們已經再也不對它提供任何支持了，請 Ruby Sass 用戶 遷移到其它實現版本（LibSass 或 Dart Sass）。

why？

最開始，用 Ruby 編寫 Sass 可以很方便地 吸引已有的用戶甚至整個 Ruby 生態來使用 後來，Node.js 在前端開發中變得無處不在，而 Ruby 則 逐漸淡入了後臺。與此同時，Sass 項目的規模 已經遠遠超出了做者最初的設想，對 Sass 在性能上的需求 也已經超過了 Ruby 的能力。

Dart-sass

由於不怎麼用sass，感謝@WashingtonHua的提醒

sass於2016年11月正式對外公佈了alpha版本的Dart Sass 42項目，即他們使用Dart對Sass進行了重寫。

根據sass-lang官方網站的說法：
Dart Sass是Sass的主要實現，這意味着它在其餘實現以前先得到了新功能。它快速，易於安裝，而且能夠編譯爲純JavaScript，從而能夠輕鬆集成到現代Web開發工做流中。

純 JS 版本 比獨立版本執行速度慢，可是它很容易集成到 現有的工做流中，而且容許你經過 JavaScript 自定義函數和 importer。經過執行 npm install --save-dev sass 命令將其添加到項目中並經過 require() 引入。

經過 npm 安裝時，Dart Sass 提供了一個 JavaScript API 用於 兼容 Node Sass。 徹底兼容的工做正在進行中

libSass

Sass 最初是用 Ruby 編寫的。LibSass 是用 C/C++ 實現的 Sass 引擎。 核心點在於其簡單、快速、易於集成。
LibSass 只是一個工具庫。如需在本地運行（即，編譯 Sass 代碼)，你須要一個 LibSass 的封裝。目前已經有不少 針對 LibSass 的封裝了。

• Sass C，個用 C 語言開發的封裝
• sass.cr 是針對 Crystal 編程語言 的 LibSass 封裝。
• go-libsass 是最活躍的 Go 語言封裝

具體參見 sass.bootcss.com/libsass

Less

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

Less 能夠運行在 Node 或瀏覽器端。一個合法的CSS代碼段自己也是一段合法的LESS代碼段。

LESS 提供了變量、嵌套、混合、操做符、函數等通常編程所需的抽象機制。

變量

變量容許咱們在一個地方定義一系列通用的值，而後在整個樣式表中調用。

在作全局樣式調整的時候，可能只須要修改幾行代碼就能夠了。

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
複製代碼

編譯爲：

#header {
  width: 10px;
  height: 20px;
}
複製代碼

混合（Mixins）

混合（Mixin）是一種將一組屬性從一個規則集包含（或混入）到另外一個規則集的方法。假設咱們定義了一個類（class）以下：

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

若是但願在其它規則集中使用這些屬性，只需像下面這樣輸入所需屬性的類（class）名稱便可

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

.post a {
  color: red;
  .bordered();
}
複製代碼

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替層疊或與層疊結合使用的能力。假設咱們有如下 CSS 代碼：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
複製代碼

用 Less 語言咱們能夠這樣書寫代碼：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
複製代碼

用 Less 書寫的代碼更加簡潔，而且模仿了 HTML 的組織結構。

你還可使用此方法將僞選擇器（pseudo-selectors）與混合（mixins）一同使用。下面是一個經典的 clearfix 技巧，重寫爲一個混合（mixin） (& 表示當前選擇器的父級）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
複製代碼

運算（Operations）

算術運算符 +、-、*、/ 能夠對任何數字、顏色或變量進行運算

注意，若是運算符兩側變量單位不一樣，在加、減或比較以前會進行單位換算。計算的結果以最左側操做數的單位類型爲準。若是單位換算無效或失去意義，則忽略單位。無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換。

沒有單位則不作轉換

// 全部操做數被轉換成相同的單位
@conversion-1: 5cm + 10mm; // 結果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 結果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 結果是 10%
@other: @base + @filler; // 結果是 15%
複製代碼

乘法和除法不做轉換。由於這兩種運算在大多數狀況下都沒有意義，一個長度乘以一個長度就獲得一個區域，而 CSS 是不支持指定區域的。Less 將按數字的原樣進行操做，並將爲計算結果指定明確的單位類型。

@base: 2cm * 3mm; // 結果是 6cm
複製代碼

你還能夠對顏色進行算術運算：

@color: #224488 / 2; //結果是 #112244
background-color: #112244 + #111; // 結果是 #223355
複製代碼

函數（Functions）

Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等。這些函數在Less 函數手冊中有詳細介紹。

函數的用法很是簡單。下面這個例子將介紹如何利用 percentage 函數將 0.5 轉換爲 50%，將顏色飽和度增長 5%，以及顏色亮度下降 25% 而且色相值增長 8 等用法：

@base: #f04615;
@width: 0.5;

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

導入（Importing）

你能夠導入一個 .less 文件，此文件中的全部變量就能夠所有使用了。若是導入的文件是 .less 擴展名，則能夠將擴展名省略掉：

@import "library"; // library.less
@import "typo.css";
複製代碼

本文僅列舉less的幾種特性的簡單介紹。關於less更詳細介紹參見文末參考文檔2

Sass

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。

特點功能 (Features)

• 徹底兼容 CSS3
• 在 CSS 基礎上增長變量、嵌套 (nesting)、混合 (mixins) 等功能
• 經過函數進行顏色值與屬性值的運算
• 提供控制指令 (control directives)等高級功能
• 自定義輸出格式

變量

sass使用$符號來標識變量(老版本的sass使用!來標識變量。

$highlight-color: #F90;
複製代碼

與CSS屬性不一樣，變量能夠在css規則塊定義以外存在。當變量定義在css規則塊內，那麼該變量只能在此規則塊內使用。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}
複製代碼

在聲明變量時，變量值也能夠引用其餘變量。

嵌套（Nesting）

基本用法與less相同

子組合選擇器和同層組合選擇器：>、+和~

這三個組合選擇器必須和其餘選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。

這些組合選擇器能夠絕不費力地應用到sass的規則嵌套中。能夠把它們放在外層選擇器後邊，或裏層選擇器前邊：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
複製代碼

sass會如你所願地將這些嵌套規則一一解開組合在一塊兒：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
複製代碼

嵌套屬性;

在sass中，除了CSS選擇器，屬性也能夠進行嵌套。

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
複製代碼

嵌套屬性的規則是這樣的：把屬性名從中劃線-的地方斷開，在根屬性後邊添加一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。就像css選擇器嵌套同樣，sass會把你的子屬性一一解開，把根屬性和子屬性部分經過中劃線-鏈接起來，最後生成的效果與你手動一遍遍寫的css樣式同樣：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
複製代碼

對於屬性的縮寫形式，你甚至能夠像下邊這樣來嵌套，指明例外規則：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
複製代碼

混合器;

混合器使用@mixin標識符定義，這個標識符給一大段樣式賦予一個名字，能夠輕易地經過引用這個名字重用這段樣式。

下邊的這段sass代碼，定義了一個很是簡單的混合器，目的是添加跨瀏覽器的圓角邊框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
複製代碼

而後就能夠在樣式表中經過@include來使用這個混合器。@include調用會把混合器中的全部樣式提取出來放在@include被調用的地方。若是像下邊這樣寫：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最終生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
複製代碼

less及sass都支持混合器傳參，具體內容參見參考文檔 二、3

導入SASS文件;

css有一個特別不經常使用的特性，即@import規則，它容許在一個css文件中導入其餘css文件。然而，後果是隻有執行到@import時，瀏覽器纔會去下載其餘css文件，這致使頁面加載起來特別慢。

sass也有一個@import規則，但不一樣的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味着全部相關的樣式被概括到了同一個css文件中，而無需發起額外的下載請求。

使用sass的@import規則並不須要指明被導入文件的全名。你能夠省略.sass或.scss文件後綴

使用SASS部分文件

當經過@import把sass樣式分散到多個文件時，你一般只想生成少數幾個css文件。那些專門爲@import命令而編寫的sass文件，並不須要生成對應的獨立css文件，這樣的sass文件稱爲局部文件。 sass局部文件的文件名如下劃線開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css

默認變量值;

!default用於變量，含義是：若是這個變量被聲明賦值了，那就用它聲明的值，不然就用這個默認值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
複製代碼

在上例中，若是用戶在導入你的sass局部文件以前聲明瞭一個$fancybox-width變量，那麼你的局部文件中對$fancybox-width賦值400px的操做就無效。若是用戶沒有作這樣的聲明，則$fancybox-width將默認爲400px。

相同與差別

相同之處：

Less和Sass在語法上有些共性，好比下面這些：

一、混入(Mixins)——class中的class；

二、參數混入——能夠傳遞參數的class，就像函數同樣；

三、嵌套規則——Class中嵌套class，從而減小重複的代碼；

四、運算——CSS中用上數學；

五、顏色功能——能夠編輯顏色；

六、名字空間(namespace)——分組樣式，從而能夠被調用；

七、做用域——局部修改樣式；

八、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

不一樣之處：

類別	Sass	less
環境	dart或其餘	基於javascript，能夠運行在 Node 或瀏覽器端
使用	複雜	簡單(相對而言)
功能	複雜	簡單(相對而言)
處理機制	服務端處理	能夠運行在 Node 或瀏覽器端
變量	以 $ 開頭	以 @ 開頭
文件後綴	.sass 或. scss	.less

目前大部分的實現都是隨着前端項目一塊兒打包構建，只在學習或演示的時候才區分使用環境，因此不用在乎處理機制，以上只是單純的對比二者自己。

請不要忘記Dart Sass，它快速，易於安裝，而且能夠編譯爲純JavaScript，從而能夠輕鬆集成到現代Web開發工做流中。

• 在Less中，僅容許循環數值。
  在Sass中，咱們能夠遍歷任何類型的數據。但在Less中，咱們只能使用遞歸函數循環數值。

• 條件語句
  Less 中並不支持條件語句，固然，能夠經過內置函數 if 以及 and，or，not 這些來模擬條件語句。
  在 Sass 中是支持條件語句的，但也不是像其餘編程語言直接 if 這樣經過保留字來編寫，須要加個 @ 符號

• 框架- sass框架誰有空能夠在評論區補充一下

用哪一個？

不知道～

1. LESS環境較Sass簡單
2. LESS使用較Sass簡單，大概？
3. 相對而言，國內前端團隊使用LESS的同窗會略多於Sass
4. 從功能出發，Sass較LESS略強大一些
5. Sass在市面上有一些成熟的框架，好比說Compass，並且有不少框架也在使用Sass，好比說Foundation
6. 就國外討論的熱度來講，Sass絕對優於LESS
7. 就學習教程來講，Sass的教程要優於LESS(自己來講，less官方文檔也夠用了)。

咱們用的less，編譯的時候生成css

若是你收穫了新知識，請點個贊吧～

-

本文收納於： 從零開始的大前端築基之旅(深刻淺出，持續更新～)

推薦閱讀：

• 聊聊css position屬性及其sticky屬性值的特性(吸頂特效)

• 迴流(reflow)與重繪(repaint)，KFC與MC

• viewport和1px | 工具人: 這是1px，設計師： 不，這不是

• 可食用的「css佈局乾貨」,純Html示例，可調試 | 水平、垂直、多列

• 前端必須掌握的「CSS層疊上下文」講解 | 純手工示例，包教包會

參考文檔：

1. Sass和less的區別是什麼？用哪一個好
2. less快速入門
3. Sass快速入門
4. SASS和LESS是什麼？如何使用？