Less和Sass的區別有哪些

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都支持混合器傳參，具體內容參見參考文檔 2、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在語法上有些共性，比如下面這些：

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

2、參數混入——可以傳遞參數的class，就像函數一樣；

3、嵌套規則——Class中嵌套class，從而減少重復的代碼；

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

5、顏色功能——可以編輯顏色；

6、名字空間(namespace)——分組樣式，從而可以被調用；

7、作用域——局部修改樣式；

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

、

目前大部分的實現都是隨著前端項目一起打包構建，只在學習或演示的時候才區分使用環境，所以不用在意處理機制，以上只是單純的對比兩者本身。

請不要忘記Dart Sass，它快速，易于安裝，并且可以編譯為純JavaScript，從而可以輕松集成到現代Web開發工作流中。

在Less中，僅允許循環數值。

在Sass中，我們可以遍歷任何類型的數據。但在Less中，我們只能使用遞歸函數循環數值。

條件語句

Less 中并不支持條件語句，當然，可以通過內置函數 if 以及 and，or，not 這些來模擬條件語句。

在 Sass 中是支持條件語句的，但也不是像其他編程語言直接 if 這樣通過保留字來編寫，需要加個 @ 符號

框架-

sass框架誰有空可以在評論區補充一下

用哪個？

不知道～

• LESS環境較Sass簡單

• LESS使用較Sass簡單，大概？

• 相對而言，國內前端團隊使用LESS的同學會略多于Sass

• 從功能出發，Sass較LESS略強大一些

• Sass在市面上有一些成熟的框架，比如說Compass，而且有很多框架也在使用Sass，比如說Foundation

• 就國外討論的熱度來說，Sass絕對優于LESS

• 就學習教程來說，Sass的教程要優于LESS(本身來說，less官方文檔也夠用了)。

以上就是Sass 和 Less 兩者之間的區別的詳細內容，更多請關注億速云其它相關文章！