文章目录
一、 什么是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的官方网站,感谢大家的观看!