一.什么是Less
Less(Leaner Style Sheets的缩写),它是一门向后兼容的CSS扩展语言,Less和Css两者之间是非常像的,因此,如果有CSS基础,学起Less也是比较容易的。Less和其他预处理在本质上都是JS库,这些库的作用是将预处理代码编译成标准的CSS代码,所以我们使用预处理器可以通过多种方式来使用。
二.Less的使用方式
1.直接引用JS文件
使用JS直接使用Less的时候需要注意,link的标签需要在less.js之前引入,并且link标签的rel属性要设置为stylesheet/less.
<head>
<title>Less使用指南</title>
//引入自己写的less代码
<link rel="stylesheet/less" type="text/css" href="index.less">
//引入Less.js的核心库
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
</head>
2.通过npm全局安装来使用less
通过npm全局安装
npm install less -g
-g参数表示将lessc命令安装到全局环境,如果想要安装特定的 版本,可以在包名称后面添加@版本号,如npm install less@2.7.1 -g.
在命令行中运行如下代码就可以将test.less编译为test.css。
lessc test.less test.css
但是在命令行中手动去编译less文件为css文件的这种使用频率不高,因为大多数情况下,作为前端一般都使用Vue,React等主流框架进行开发,所以我们大多数情况下都会在Webpack中使用Less.
3.在Webpack中使用Less
由于Webpack本身只能处理js文件,所以需要借助less-loader来帮忙处理Less文件
//下载less,less-loader
npm install less less-loader -save-dev
//下载css-loader,style-loader
npm install css-loader style-loader -save-dev
配置webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.less$/i, loader: [
// 将 less 文件编译成 css 文件,注意 Webpack Loader 加载顺序从右到左
'style-loader', 'css-loader', 'less-loader'
]
}
]
}
};
实际上,在使用像Vue这样的框架时,官方的CLI脚手架已经帮我们集成了css预处理器,不需要我们自己手动进行Webpack的配置,在使用脚手架初始化项目的时候勾选上自己喜欢的预处理器就好了。
三.Less的具体用法
1.嵌套
less支持以嵌套的方式去写css代码,不过多赘述,直接上代码
按照父类嵌套子类规范来书写的css:
/*CSS写法*/
.msg-list{
width: 500px;
padding: 16px 20px;
max-height: 500px;
}
.msg-list .msg-item{
height: 200px;
left: 20px;
}
.msg-list .msg-item .msg-item-title{
color: antiquewhite;
font-size: 24px;
}
使用Less嵌套写法:
/*Less写法*/
.msg-list{
width: 500px;
padding: 16px 20px;
max-height: 500px;
.msg-item{
height: 200px;
left: 20px;
&-title{
color: antiquewhite;
font-size: 24px;
}
}
}
以上这两种写法在页面上得到的效果是一样的,但是我们可以直观地感受到Less的写法更优雅,更简洁,在Less写法中支持嵌套使用父选择器&,这样写起来更简洁优雅,不需要再去嵌套复杂的css代码了。
2.Less中的变量
在Less中,支持想JS中声明一个变量,在变量声明时需要以@开头,并且需要以分号来结束声明,在使用时直接用变量名来替换设置的样式值即可。代码如下:
/*Less写法*/
/* 声明变量 */
@fontSize: 16px;
@height: 500px;
/* 使用变量 */
.msg-list{
height: @height;
font-size:@fontSize;
line-height:@height;
}
编译后的CSS代码:
/* CSS代码 */
.msg-list{
height: 500px;
font-size: 16px;
line-height: 500px;
}
使用变量的好处就是,我们可以将公共的样式值抽离出来,如果多个模块文件共用变量时,我们就可以将这些公共的样式值放在一个单独的文件中,然后使用@import导入。
3.导入使用
下面是一个公共文件的public.less的代码:
@text-size: 20px;
@text-color:black;
@text-title-color:pink;
@text-title-size:36px;
在业务模块中就可以通过@import来使用public.less中的一些变量:
@import "public.css":
.msg-item{
font-size: @text-size;
color: @text-color;
&-title{
font-size: @text-title-size;
color:@text-title-color;
}
}
4.插值用法
以上的例子都是用在CSS中的属性值,其实变量还能以插值的形式在选择器名称,属性名称,URL路径以及@import声明中使用,插值用法类似于JS模板字符串,在使用时首先定义一个变量a,然后以@{a}的方式去使用:
/* 定义变量 */
@slec:banner;
@fontSize:font-size;
@imgPath:img-path;
.@{slec}{
@{fontSize}:16px;
font-weight:bold;
maigin:auto;
background-img:url("@{imgPath}/1.png");
}
编译后:
.banner{
font-size: 16px;
font-weight: bold;
margin: auto;
background-img:url("img-path/1.png");
}
5.混合
熟悉Vue框架的对mixin应该很熟悉,Less中的混合就和Vue中的mixin的概念差不多,Less中的混合就是一个设置了属性的选择器a混入选择器b中,这样,选择器b中既有选择器b本身设置的属性也包含选择器a中的属性,Less混合代码如下:
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box-wrap{
padding: 8px 16px;
border: 1px solid black;
.flex-center();
}
编译后的CSS代码如下:
.box-wrap{
padding: 8px 16px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
以上的用法都是固定的属性,其实混合还可以带参数使用,这种用法跟 JS
函数非常类似
.size(@s) {
width: @s;
height: @s;
}
// 默认参数
.br(@r: 4px) {
border-radius: @r;
}
.box {
padding: 4px;
.size(20px);
.br();
}
编译后的CSS如下:
.box {
padding: 4px;
width: 20px;
height: 20px;
border-radius: 4px;
}
另外需要注意的是,Less
代码编译时,会把混合代码也选择渲染出来,如果不想保留混合原本的代码,定义的时候可以在它后面加上 ()
;此外,在混合代码后面加上!important,所有的属性都会加上!important。
6.函数与计算
Less中使用函数和计算的频率并不是特别高,因为CSS本身就是负责页面样式的,计算的事情还是交给JS处理比较好,在这里也就以颜色计算和图片尺寸计算简单地说一下:
// 假设有一个16进制的颜色值,需要取它的不透明度为50%的值,有几种做法:
// 16进制的颜色值
@color: #ea78bc;
// 做法1:去找一个可以将16进制转成rgb的网站,将其转为rgb形式后再用rgba表示
@colorRgb: rgb(234, 120, 188); // 16进制 -> rgb
@colorResult1: rgba(234, 120, 188, 0.5);
// 做法2:使用Less提供的red、green、blue函数获取rgb值,再用rgba表示
@colorResult2: rgba(red(@color), green(@color), blue(@color), 0.5);
// 做法3:使用fade、fadeout函数直接处理
@colorResult3: fade(@color, 50%); // 设置颜色的不透明度
@colorResult4: fadeout(@color, 50%); // 增加颜色的不透明度
以上得到的颜色效果是一样的
图片相关函数:
// 返回图片宽高
@imgSize: image-size("image.jpg"); // output: 100px 100px
// 返回图片宽
@imgWidth: image-width("image.jpg"); // output: 100px
// 返回图片高
@imgHeight: image-height("image.jpg"); // output: 100px
// 返回图片的base64数据
@imgUrl: data-uri('./image.jpg'); // output: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==')
.box-wrap {
width: @imgWidth;
height: @imgHeight;
background-image: @imgUrl;
background-size: @imageSize;
}
在上述代码中,由于不确定图片尺寸而无法精确涉及元素样式时,Less中和图片有关的函数就起作用了。
关于计算属性,在Less官网中给的定义是这样的:
算术运算符 +
、-
、*
、/
可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如: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%