玩转CSS必不可少的Less

[tabzzz]

这是我参加“朝闻道”知识分享大赛的第二篇文章。

目录

• 一、 什么是Less
• 二、 为什么选择Less
• 三、 如何使用Less
• 1. 在浏览器环境下使用Less
• 2. 在Node.js里使用Less
• 3. 配合Webpack使用Less
• 4. 使用工具
• 四、 Less的语法
• 1. 变量
• 2. 混合
• 3. 嵌套
• 4. 运算与函数
• 运算
• 函数
• 5. 注释与导入
• 注释
• 导入
• 五、 总结

一、 什么是Less

​ Less（Leaner Style Sheets的缩写）是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。Less以及其他预处理器的本质都是JS库，这些库（或者说预处理器）就是将预处理代码编译成标准的CSS代码。

​ 简单来说，Less扩充了CSS语言，它增加了诸如变量、混合、嵌套、函数等功能，这使得CSS变得更加方便维护，再添加一些样式时，句式更加精简。

---

二、 为什么选择Less

​ 最早是道听途说，听说有个东西叫CSS预处理器，可以让CSS“玩的更花”。在学习CSS预处理器的过程中，可以看到许多博主多方面分析包括Less在内的Sass、Scss、Stylus等的的CSS预处理器的利弊。本人体验一圈过后，发现其实都大同小异，没必要在这上面纠结太长时间。

​ 针对特定的纠结狂（像我这样的哈哈哈），还是建议大家以Less为首选。我看了很多大博主们的项目，发现使用Less的明显偏多一点。冲它就对了！

---

三、 如何使用Less

​ 上面也和大家讲了，Less的本质就是JS库，所以在我们使用之前我们需要配置（或者说引用）Less。

1. 在浏览器环境下使用Less

<link rel="stylesheet/less" type="text/css" href="你的Less文件路径" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

2. 在Node.js里使用Less

首先进行全局安装：

npm install -g less

-g参数表示将lessc命令安装至全局环境，版本号可以在-g后面加上@版本号。

在命令行中运行如下代码：

>lessc style.less style.css

3. 配合Webpack使用Less

现在使用纯es开发的生态少之又少，大部分的项目都使用Vue、React等主流前端框架，因此实际开发中大多数都是在Webpack中使用Less。

我们需要借助less-loader来协助Webpack处理Less文件，因为Webpack只能处理js文件

npm i less-loader

安装less-loader后，有时会产生error提示，这大概率是因为构建项目的Webpack与刚才下载的less-loader版本不兼容。这时我们可以重新下载指定版本号的less-loader，代码如下：

npm i less-loader@版本号

4. 使用工具

给大家推荐一款软件，可以将写好的Less自动转义成标准的CSS语言：Koala

附上下载链接

在这里就不和大家详细讲解Koala的使用方法啦哈哈哈（因为懒），网上随便一搜就有好多教程，如果后续时间充足的话会回来把详细使用方法补上！！！

---

四、 Less的语法

这里给大家列举的都是较为常用且必要的语法，如果想了解更多请移步Less的官方网站

1. 变量

Less的变量极大便捷了我们对CSS的value的设置，话不多说，代码如下：

@width: 1000px;
@height: @width / 5;
@color: red;

header {
  width: @width;
  height: @height;
  background-color: @color;
}
footer {
  width: @width;
  height: @height;
  background-color: @color;
}

实际经过处理的CSS代码为：

header {
  width: 1000px;
  height: 200px;
  background-color: red;
}
footer {
  width: 1000px;
  height: 200px;
  background-color: red;
}

2. 混合

混合是将一组属性从一个规则集包含到另外一个规则集的方法，我们首先需要先设定一组属性：

.minxins {
    width: 100px;
    height: 100px;
    font-size: 20px;
    background-color: red;
}

我们如果想要在其他规则集中使用以上minxins所包含的属性，我们可以像下面这样写：

.hello {
    color: orange;
    .minxins();
}

这样我们就可以让minxins的所有属性出现在.hello中了，极大提高了我们编写CSS文件的效率。

3. 嵌套

Less提供了使用嵌套代码的能力，首先先给大家展示一下使用CSS写的一段代码：

.header {
  background-color: black;
}
.header .a {
  color: white;
}
.header .b {
  font-size: 20px;
}

而用Less我们可以写的十分精简：

.header {
  background-color: black;
  .a {
    color: white;
  }
  .b {
    font-size: 20px;
  }
}

4. 运算与函数

Less中函数与运算的使用频率感觉上不是很高，因为CSS的本职工作就是负责界面样式的，运算、计算这种事情还是要交给JavaScript去做，各司其职，做好自己的本职工作就可以。

但是没办法嘛，毕竟这也是预处理器的一个特点，我们就把函数和运算这两个特性放在一起简单的讲一下，其实还是蛮有趣的喔qwq

运算

大家也看到了我在讲解演示变量时有这样两行代码：

@width: 1000px;
@height: @width / 5;

我在上方定义了@width的值，@height的值由@width的值计算而来，这就是一个简单的运算。

摘一下官网对于运算的定义：

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

简单来说，就是可以对CSS各种属性的值进行数学计算，但是估计很少有人用这种运算吧（明明可以写1000px，或者重新定义一个变量为1000px，我偏要用我之前定义过的值为500px的变量乘以2，真没必要吧哈哈哈哈）。

函数

话不多说，直接上示例：

// 颜色函数案例
// 要求：拿到color的不透明度为30%的值
@color: #123456;
// 方法1: 使用Less提供的函数red、green、blue函数取rgb值
@colorfunc1: rgba(red(@color), green(@color), blue(@color), 0.3);
// 方法2: 使用fade、fadeout函数处理
@colorfunc2: fade(@color, 30%); 
@colorfunc3: fadeout(@color, 30%);

实际可知，colorfunc1~3的值都是一样的。

在这里只是给大家提供了一个函数的思维，为了告诉大家在Less中是可以使用函数的，不过使用的次数真的少之又少...

附上Less的函数手册：Less函数手册

5. 注释与导入

注释

块注释和行注释都可以使用，注释格式如下：

/* 我是块注释方法
 * 我可以在Less中被使用 */

// 我是行注释方法 
// 我在Less中也可以使用

导入

在许多项目中，并不是所有的代码内容都保存在一个文件下，这时候就需要我们对另一文件中的内容进行导入。在Less中，导入的格式如下：

@import "xxx"
@import "xxx.less"

其中，文件的后缀可以省略。

---

五、 总结

好啦！这就是我分享相关Less的内容啦！在我们书写某些复杂、重复的CSS代码时，我们可以合理的利用它，帮我们快速、高效的编写CSS代码。如果有相关问题或者文章错误请大家在评论区指正，欢迎大家的留言！
最后再次附上Less的官方网站，感谢大家的观看！