Spring Boot+Vue前後端分離商城實戰（十一）CSS 預處理器 Less

前言

本章我們要講的是 CSS 預處理器，沒有學過預處理器的同學，會認識到原來 CSS 也能設置變量、方法。吃透本章內容，對後期上手開發項目寫 CSS 部分，有很大的幫助，比如項目的主題色我們可以設置多個變量，不用重複的編寫。Flex 佈局可以寫成一個公用的方法，不必每次都寫重複的代碼。簡單說就是提取大量重複的代碼，能讓 CSS 更加規範。

初識 Less

Less 是什麼

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

@base: #fff;
.wh(@width, @height) {
	width: @width;
  height: @height;
}
.box {
  color: @base;
  .wh('30px', '30px')
}

編譯輸出後的結果：

.box {
	color: #fff;
  width: '30px';
  height: '30px';
}

瀏覽器中使用 Less

我們如何在網頁中使用 Less 呢？有兩種形式，第一種是通過 npm 下載 Less 包，通過 webpack 打包編譯後可以編譯成最終的 CSS。第二種是直接通過 Less 腳本在 HTML 頁面中使用。