Less快速入门，看这篇就够啦！

大家好，我是讯享网，很高兴认识大家。

前言

本文主要对Less进行简要的介绍，其中包括Less简介、Less的基础使用、Less的主要特性等。本文旨在帮助读者快速入门Less，了解什么是Less、为什么要使用Less、如何使用Less进行前端样式的编写。

Less简介

Less（Leaner Style Sheets）是CSS预处理器，是一种动态的样式表语言。Less 可以运行在 Node.js 和浏览器端，它扩展了 CSS，增加了变量、mixin、函数、嵌套等特性，使 CSS 更易于维护和扩展。

比如，在开发过程中最能直观地感受到的一个便利的地方就是嵌套。原生的CSS语法并不支持嵌套，这会导致出现一个常见的情景：
当我们想要为一个有多层上层元素的子元素增加样式时，我们需要一层一层向上找到它所有的上层元素，然后写一个有一长串类名的后代选择器。而当同一级有两个兄弟元素都需要添加单独的样式时，我们就要把以上的步骤再重复一遍，反复的写同样的一串上层元素的类名。如果使用Less进行编写时，由于嵌套的存在，整个样式的结构会更加清晰，也不需要编写重复繁杂的后代选择器。下面这段代码可以直观的感受到Less嵌套特性的优越：

<body> <div class = 'class1'> <div class = 'class2'> <div class = 'class3'> <div class = 'class4'> <div class = 'child1'></div> <div class = 'child2'></div> </div> </div> </div> </div> </body> <!-- 原生CSS语法 --> <style> .class1 .class2 .class3 .class4 .child1 { 
      /* child1的样式 */ } .class1 .class2 .class3 .class4 .child2 { 
      /* child2的样式 */ } </style> <!-- less语法 --> <style lang="less"> .class1 { .class2 { .class3 { .class4 { .child1 { /* child1的样式 */ } .child2 { /* child2的样式 */ } } } } }

讯享网

在上述代码中，如果我们想将class1的类名进行修改，那么我们要修改每一个class1的后代元素对应的选择器，而在Less中，我们只需要修改一次即可。这也体现了Less代码的易维护性。

Less还有一个很大的特点：支持原生的CSS语法，也就是说任何有效的 CSS 都是有效的 Less。这意味着你可以将任何现有的 CSS 文件重命名为 Less 文件，然后立即开始使用 Less 的特性。正是这些功能帮助我们的开发变得更加便捷，且样式代码更好维护。

Less的基本使用

在 Node.js 环境中使用 Less ：

讯享网npm install -g less //安装less

安装完成后，你可以使用以下命令来检查安装是否成功：

lessc -v //查看less的版本,出现版本号则安装成功

在浏览器环境中使用 Less(引入.less文件) ：

讯享网<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

未使用框架时，需要在.less文件中编写less代码，Less会自动编译生成对应的.css文件。（记得在vsCode中安装Easy LESS插件）此时需要按照上述的在浏览器环境中使用Less的方式引入.less文件。

使用了前端框架时（这里以vue框架为例):

<template></template> <script></script> <style lang = "less"></style> //在样式部分设置lang为less

Less的主要特性

Less的特性包括变量（Variables）、混入（Mixins）、嵌套（Nesting）、运算（Operations）、转义（Escaping）、函数（Functions）、命名空间和访问符、映射（Maps）、作用域（Scope）、注释（Comments）、导入（Importing）。由于Less的特性较多，有一些是开发中使用较少的，以下主要介绍常用的一些特性。

嵌套( 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 的组织结构。即子元素的选择器嵌套在父元素的选择器后面的{}中。

变量（`Variables`）

Less中用@声明变量

讯享网

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

编译为：

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

运算（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: (# / 2); // 结果是 # background-color: # + #111; // 结果是 #

calc() 特例

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2; width: calc(50% + (@var - 20px)); // 编译为 calc(50% + (25vh - 20px))

函数（Functions）

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。想了解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); }

注意：Less并不支持自定义函数

混入（Mixin）

混合（Mixin）就是将一段代码重复利用。假设我们定义了一个类（class）如下：

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }

如果我们希望在其它样式中使用这些属性呢？我们只需要像下面这样输入所需属性的类名称即可，如下所示：

讯享网#menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。

注意，你也可以使用id作为 mixin 使用。如：#menu()。

总结

Less新增了很多的特性，以上仅简单介绍了常用的几个特性，如果想了解更详细的特性或更多特性，可以上Less官网查看。指路->Less中文文档

Less是一个很好用的CSS预处理器，使用Less能够帮助我们更快速地进行开发。希望各位小伙伴看完我的文章能够有一些收获！