优雅的使用 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小时内删除侵权内容。