前言
Less 和 SCSS 都是流行的 CSS 預處理器，它們的目的都是擴展 CSS 的功能，使樣式表更具組織性、可維護性和可重用性。雖然它們有許多相似之處，但在語法、特性和工作方式上也存在一些差異。
Less
Less 是一種動態樣式表語言，它是CSS預處理器之一。Less是一種向后兼容的CSS擴展，允許開發者使用類似于編程的方式來編寫CSS。允許開發者使用變量、混合、嵌套規則等高級功能，以更有效、模塊化的方式編寫CSS，極大地提高了代碼的可重用性和可維護性。
SCSS
SCSS（Sassy CSS） 是Sass（Syntactically Awesome Stylesheets）的一種語法，它是CSS預處理器之一。與Less類似，SCSS也提供了一系列強大的功能和特性，它保留了less的一系列優點如變量、混合、嵌套、運算等，同時也新增加了條件語句、循環、函數等高級功能。所以SCSS 更加適用于處理復雜項目中的樣式需求， 可讀，可重用性也更高。
語法差異
Less 引用變量的方式
在 Less 中，使用 @ 符號來定義和引用變量。
定義變量:
css
代碼解讀
復制代碼
@primary-color: #3498db;
引用變量:
css
代碼解讀
復制代碼
.button { color: @primary-color; }
SCSS 引用變量的方式
在 SCSS 中，使用 $ 符號來定義和引用變量。
定義變量:
css
代碼解讀
復制代碼
$primary-color: #3498db;
引用變量:
css
代碼解讀
復制代碼
.button { color: $primary-color; }
對比
- Less: 使用
@符號來定義和引用變量。 - SCSS: 使用
$符號來定義和引用變量。
混合
Less 混合（Mixins）
在 Less 中，混合使用 .class 來定義，并且通過 . 符號進行調用。
定義混合:
css
代碼解讀
復制代碼
.border-radius(@radius) { border-radius: @radius; }
調用混合:
css
代碼解讀
復制代碼
.button { .border-radius(5px); }
SCSS 混合（Mixins）
在 SCSS 中，混合使用 @mixin 來定義，并且通過 @include 指令進行調用。
定義混合:
css
代碼解讀
復制代碼
@mixin border-radius($radius) { border-radius: $radius; }
調用混合:
css
代碼解讀
復制代碼
.button { @include border-radius(5px); }
對比
-
Less 混合:
- 使用
.class定義混合。 - 使用
.符號調用混合。 - 參數傳遞使用
@符號。
- 使用
-
SCSS 混合:
- 使用
@mixin定義混合。 - 使用
@include指令調用混合。 - 參數傳遞使用
$符號。
- 使用
參數傳遞
-
Less:
css
代碼解讀
復制代碼
.border-radius(@radius) { border-radius: @radius; }參數傳遞使用
@符號。 -
SCSS:
css
代碼解讀
復制代碼
@mixin border-radius($radius) { border-radius: $radius; }參數傳遞使用
$符號。
調用混合
-
Less:
css
代碼解讀
復制代碼
.button { .border-radius(5px); }使用
.符號調用混合。 -
SCSS:
css
代碼解讀
復制代碼
.button { @include border-radius(5px); }使用
@include指令調用混合。
總結
- Less 和 SCSS 的混合功能都允許你將一組 CSS 屬性封裝到一個類或混合中，以便在其他選擇器中重用。
- Less 使用
.class來定義混合，并使用.符號進行調用，參數傳遞使用@符號。 - SCSS 使用
@mixin來定義混合，并使用@include指令進行調用，參數傳遞使用$符號。
功能差異
-
Less?提供了基本的預處理功能，如變量、混合和嵌套規則，適合于輕量級應用。
-
SCSS?擁有更高級的功能，如條件語句、循環、函數等，更適合復雜的項目和大型應用。
編譯環境
Less 編譯環境
-
Less.js:
- Less 的官方 JavaScript 實現，可以在瀏覽器中實時編譯 Less 文件。
- 適用于開發環境，但不推薦在生產環境中使用。
-
Less Command Line Tool:
-
Less 提供了一個命令行工具，可以在命令行中編譯 Less 文件。
-
安裝方法：通過 npm 安裝
less包。css
代碼解讀
復制代碼
npm install -g less -
使用方法：
css
代碼解讀
復制代碼
lessc styles.less styles.css
-
-
構建工具集成:
- Less 可以與許多前端構建工具（如 Webpack、Gulp、Grunt 等）集成。
- 使用相應的插件或加載器，可以在構建過程中自動編譯 Less 文件。
SCSS 編譯環境
-
Dart Sass:
-
SCSS 的官方編譯器，是用 Dart 語言編寫的。
-
安裝方法：通過 npm 安裝
sass包。css
代碼解讀
復制代碼
npm install -g sass -
使用方法：
css
代碼解讀
復制代碼
sass input.scss output.css
-
-
Node-sass:
-
Node.js 的 SCSS 編譯器，基于 LibSass。
-
安裝方法：通過 npm 安裝
node-sass包。css
代碼解讀
復制代碼
npm install -g node-sass -
使用方法：
css
代碼解讀
復制代碼
node-sass input.scss -o output.css
-
-
Ruby Sass:
-
最早的 SCSS 編譯器，用 Ruby 語言編寫。
-
需要先安裝 Ruby 和 Sass gem。
-
使用方法：
css
代碼解讀
復制代碼
sass input.scss output.css
-
-
構建工具集成:
- SCSS 也可以與前端構建工具（如 Webpack、Gulp、Grunt 等）集成。
- 使用相應的插件或加載器，可以在構建過程中自動編譯 SCSS 文件。
總結
- Less 和 SCSS 都有官方的編譯工具，分別是 Less.js 和 Dart Sass。
- Less 使用 Less Command Line Tool 或集成到構建工具中進行編譯。
- SCSS 有多個編譯器可供選擇，包括 Dart Sass、Node-sass 和 Ruby Sass，同樣可以集成到前端構建工具中。
使用場景
Less 使用場景
-
舊項目遷移：
- 對于已有的 Less 項目，繼續使用 Less 是最直接的選擇。
-
簡單項目：
- 當項目規模較小，不需要復雜的功能時，Less 可以是一個簡單和輕量級的選擇。
-
團隊偏好：
- 如果團隊已經習慣使用 Less，并且沒有特別的需求或偏好，可以繼續使用 Less。
-
教育和學習：
- 對于 CSS 預處理器的初學者，Less 的語法和概念相對較簡單，更容易入門。
SCSS 使用場景
-
新項目：
- 對于新的前端項目，特別是大型和復雜的項目，使用 SCSS 可能更為合適，因為它提供了更多的功能和控制。
-
現代開發環境：
- SCSS 通常與現代的前端構建工具（如 Webpack、Parcel、Gulp 等）更好地集成，可以方便地進行自動編譯和優化。
-
復雜的 UI 框架和組件庫：
- 對于需要頻繁定制和擴展的 UI 框架和組件庫，SCSS 的混合（Mixins）、嵌套規則和變量管理功能非常有用。
-
豐富的生態系統：
- SCSS 有一個龐大的社區和生態系統，提供了許多開源庫、工具和插件，方便開發者使用和擴展。
-
高級功能需求：
- 如果項目需要高級的功能，如控制指令、內建函數、模塊化等，SCSS 提供了更豐富的功能和選項。
總結
- Less 適合簡單項目、舊項目遷移和團隊偏好，以及對 CSS 預處理器較為陌生的開發者。
- SCSS 適合新項目、大型和復雜的項目、現代開發環境，以及需要高級功能和控制的項目。
作者：來顆奇趣蛋
鏈接：https://juejin.cn/post/7358688805157879845
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
