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

HUwHU_

已于 2023-11-24 14:19:40 修改

阅读量142

点赞数 1

文章标签： less css 前端

于 2023-11-24 14:17:38 首次发布

本文链接：https://blog.csdn.net/qq_51365459/article/details/134597711

版权

前言

本文主要对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: (#224488 / 2); // 结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

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能够帮助我们更快速地进行开发。希望各位小伙伴看完我的文章能够有一些收获！

HUwHU_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Less快速入门，看这篇就够啦！

Less（Leaner Style Sheets）是CSS预处理器，是一种动态的样式表语言。Less 可以运行在 Node.js 和浏览器端，它扩展了 CSS，增加了变量、mixin、函数、嵌套等特性，使 CSS 更易于维护和扩展。比如，在开发过程中最能直观地感受到的一个便利的地方就是嵌套。原生的CSS语法并不支持嵌套，这会导致出现一个常见的情景：当我们想要为一个有多层上层元素的子元素增加样式时，我们需要一层一层向上找到它所有的上层元素，然后写一个有一长串类名的后代选择器。
复制链接

扫一扫