優雅的使用 Less

前言

我們在寫 CSS 的時候，可能會遇到許許多多的問題。現如今我們可以使用 CSS預處理器 來提高我們的開發效率及開發的舒適度，本文就帶大家來聊聊比較流行的 less 的特點以及使用方法。

一、簡介

1. CSS預處理器

CSS 預處理器是一個能讓你通過預處理器自己獨有的語法來生成CSS的程序。市面上有很多CSS預處理器可供選擇，且絕大多數CSS預處理器會增加一些原生CSS不具備的特性，例如代碼混合，嵌套選擇器，繼承選擇器等。這些特性讓CSS的結構更加具有可讀性且易于維護。—— MDN Web Docs

2. less

Less （Leaner Style Sheets 的縮寫） 是一門向后兼容的 CSS 擴展語言。這里呈現的是 Less 的官方文檔（中文版），包含了 Less 語言以及利用 JavaScript 開發的用于將 Less 樣式轉換成 CSS 樣式的 Less.js 工具。—— Less 中文網

二、開始使用

1. 在 Node.js 環境中使用

1.1 手動編譯

全局安裝 Less：

npm i -g less # or yarn global add less # 查看版本，有版本則安裝成功 lessc -v # 成功示例：lessc 4.1.2 (Less Compiler) [JavaScript]

全局安裝成功后就可以使用命令行將 .less 文件編譯為 .css 文件啦！我們來試一試，新建一個 demo.less 的文件。

@color-theme: #0094ff; .demo { background-color: @color-theme; }

打開命令行，切換到該文件的目錄下，然后輸入 lessc demo.less demo.css ，得到編譯后的文件 demo.css ：

.demo { background-color: #0094ff; }

1.2 在 webpack 中使用

基本步驟：

安裝 less 以及 less-loader

配置 webpack

如果是 .vue 文件要在 style 標簽上增加屬性 lang="less"

安裝：

npm i less less-loader --save-dev # or yarn add less less-loader --dev

配置 webpack ：

// webpack.config.js module.exports = { module: { rules: [ { test: /\.less$/i, loader: [ // compiles Less to CSS 'style-loader', 'css-loader', 'less-loader', ], }, ], }, };

此處附上 webpack 配置文檔傳送門：less-loader

如果是 Vue.js 的項目則需要增加 style 標簽的 lang 屬性：

2. 在瀏覽器環境中使用

在 .html 文件的 head 標簽內進行引入：

三、用法

1. 變量

1.1 定義及使用

我們可以使用 @ 符號開頭定義變量，注意要在結尾處加上分號。

@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }

編譯后代碼：

#header { width: 10px; height: 20px; }

實際開發中，我們可以根據不同的類型來命名不同的變量，這樣不但便于理解，而且易于維護。

/* ============ 距離 ============ */ @space-large: 36px; @space-middle: 24px; @space-small: 12px; // ... /* ============ 顏色 ============ */ // 顏色可以說是一個項目中定義最多的變量了,可以單獨拆分出一個 less 文件進行維護 @color-theme: #0094ff; @title-color: #090909; // ...

1.2 轉義

在定義變量時，可以使用任何字符串，在使用時該字符串保持原樣輸出。

// 定義變量為一個字符串 @min-1024: ~"(min-width: 1024px)"; .element { // 在媒體查詢處使用該變量 @media @min-1024 { color: skyblue; } }

編譯后代碼：

@media (min-width: 1024px) { .element { color: skyblue; } }

1.3 作用域

類似于 JavaScript 中的塊級作用域， Less 中同樣存在變量的作用域。即有限從最近的作用域下讀取變量，換句話說，如果有兩個同名變量，那么誰和使用行近誰生效。

// 定義一個同名變量 @color-title .demo { @color-title: pink; .item { @color-title: skyblue; .title { color: @color-title; // skyblue } } }

編譯后代碼：

.demo .item .title { color: skyblue; }

1.4 映射

從版本 3.5 起，我們可以定義一組映射值，以提高 Less 代碼的可復用性。就像 JavaScript 中的 Object 的鍵值對一樣，可以有多個，互不干擾。

// before // 定義多個變量 @color-theme: #0094ff; @color-success: #93dd00; .status { color: @color-theme; &.success { color: @color-success; } } // after // 定義一個映射 #colors() { theme: #0094ff; success: #93dd00; } .status { color: #colors[theme]; &.success { color: #colors[success]; } }

編譯后代碼：

.status { color: #0094ff; } .status.success { color: #93dd00; }

2. 混合

混合即 Mixin ，是一種復用代碼的手段。可以將一個類名下的代碼塊輕易的放入另一個類名之中。我們先來看一下基本用法：

// 一個樸實無華的類名 .bordered { border-top: solid 1px #000; } #menu a { color: #000; // 將類名 bordered 中的代碼混入,不要忘記結尾的分號 .bordered(); // 或者寫成.bordered; }

編譯后代碼：

.bordered { border-top: solid 1px #000; } #menu a { color: #000; border-top: solid 1px #000; }

在實際開發中，我們可以在全局公共樣式文件中定義公共類名，在其他組件的私有樣式文件中引入并使用。

// src/styles/index.less // 全局樣式文件 // 一些公共類名... .mg-0-auto { margin: 0 auto !important; } .text-center { text-align: center !important; }

// src/pages/Demo/index.less // 某組件私有樣式 @import url(@/styles/index.less); // 引入全局公共樣式 // 一個自定義類名 .demo { background-color: #fff; // 使用混合,不要忘記結尾的分號 .mg-0-auto(); .text-center(); }

3. 嵌套

3.1 使用嵌套

Less 允許把具有層級關系的類名/選擇器進行嵌套使用，注意需要用花括號進行包裹。

.demo { margin: 0 auto; .box { display: flex; .item { color: #000; } } }

編譯后代碼：

.demo { margin: 0 auto; } .demo .box { display: flex; } .demo .box .item { color: #000; }

3.2 符號 &

使用 & 符號代替父元素。

// before .box { display: flex; .item { color: #000; } .item.active { color: skyblue; } } // after .box { display: flex; .item { color: #000; // "&" 代替了父級類名 ".item" &.active { color: skyblue; } } }

3.3 @規則嵌套和冒泡

@ 規則（例如 @media 或 @supports）可以與選擇器以相同的方式進行嵌套。@ 規則會被放在前面，同一規則集中的其它元素的相對順序保持不變。這叫做冒泡（bubbling）。

.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-color: skyblue; } } @media (min-width: 1280px) { width: 800px; } }

編譯后代碼：

.component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-color: skyblue; } } @media (min-width: 1280px) { .component { width: 800px; } }

美中不足的是每一個類名都會單獨編譯出一個@media，多個相同條件的媒體查詢不會進行合并。

4. 運算

算術運算符 +、-、*、/ 可以對任何數字、顏色或變量進行運算。如果可能的話，算術運算符在加、減或比較之前會進行單位換算。

// 所有操作數被轉換成相同的單位 @conversion-1: 5cm + 10mm; // 結果是 6cm @conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm @incompatible-units: 2 + 5px - 3cm; // 結果是 4px @base: 10%; @filler: @base * 2; // 結果是 20% @other: @base + @filler; // 結果是 30%

5. 函數

Less 內置了多種函數用于轉換顏色、處理字符串、算術運算等。下面列舉一些常用的函數，完整版請移步官網的《Less 函數手冊》。

邏輯函數

if 根據表達式返回不同結果

boolean 存儲一個布爾值，用于 if 判斷

字符串函數

escape 將URL 編碼應用于輸入字符串中的特殊字符

replace 替換字符串中的文本

數學函數

ceil 向上舍入到下一個最高整數

floor 向下舍入到下一個最小整數

percentage 將浮點數轉換為百分比字符串

sqrt 計算一個數的平方根。保持單位不變

abs 計算一個數的絕對值。保持單位不變

min 返回一個或多個值中的最小值

max 返回一個或多個值中的最大值

6. 注釋

我們可以在 less 中使用單行注釋和多行注釋，其中但行注釋不會被編譯到 CSS 中去。

// 普通注釋,不會被編譯到 CSS 中 /* 多行注釋,會被編譯到 CSS 中 */

編譯后代碼：

/* 多行注釋,會被編譯到 CSS 中 */

7. 導入

我們可以在一個 less 文件中引入其他的 less 文件，引入后就可以使用被引入文件的變量和映射。一般在一個 less 文件的最頂部進行引入。

// 可以這樣引入 @import url(a.less); // 或者這樣引入 @import 'b.less'; // 當然也可以引入 CSS 文件 @import 'style.css';

參考資料

Less 中文網

webpack

MDN Web Docs

學習Less-看這篇就夠了

Less web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。