LESS
在写css的时候,可以直接写一个.css文件,但是实际开发中也会使用less的方法写css。
less的写法比css的写法功能更加强大。
Less简介
Less 是一门 CSS 预处理语言,它扩展了 CSS 的写法,增加了变量、函数等特性。
注意点:
- 在less中,完全兼容css的语法,所以可以直接在less文件中写css没问题
- 浏览器不认识less文件,需要需要使用less中的样式,需要先把less文件编译成.css文件,再使用!!
less的编译插件及配置
以下是VSCode安装步骤:
- 选择左侧第五个拓展按钮,下载插件
easy less
,点击安装,再点击重新加载
- 安装好之后,重新加载或者关闭vscode重新打开
- 实际开发中需要对插件进行配置
- 使用的时候直接复制粘贴,注意在上一行的最后加一个逗号
- 设置完之后需要重新打开vscode即可
代码如下:
"less.compile": {
"out": "../css/"
}
配置完成后,只需要同创建CSS文件夹一样,创建less文件夹,在less文件夹内部创建less文件,当保存less文件的同时,会自动生成对应CSS文件夹和CSS文件
注意点:
-
以后项目中如果有less文件之后,样式都在less文件中写即可,不用去修改css文件
因为css文件都是less编译之后的结果,只需要关注less的修改即可
-
但是页面中引入的必须是编译之后的css文件,因为less文件浏览器不认识。
less的注释
在less文件中可以写两种注释
- 一种是css的注释:
/* 注释的内容 */
,最后会编译展示在css文件中 - 一种是less的注释:
// 注释的内容
,只在less中使用,不会编译展示在css文件中
一般在less文件中,推荐使用less的注释方法
less的变量
一般在网站中会有主题色(当前网页中用的较多的颜色),如果此时需要改换网页的主题色,一个个去改非常麻烦,此时可以使用less中的变量完成效果
语法:
- 变量:可以变化的量
- 语法:@变量名:变量值;
- 作用:编译的时候会把less中所有的变量名替换成变量值,这样可以统一修改某一个值(如主题色)
例子:
@mainColor:#e92322;
.box1 {
width: 200px;
height: 200px;
background-color: @mainColor;
}
.box2 {
width: 200px;
height: 200px;
background-color: @mainColor;
}
.box3 {
width: 200px;
height: 200px;
background-color: @mainColor;
}
less的嵌套
在less中,选择器的关系可以通过嵌套来表示
/* less中的嵌套:less中选择器可以嵌套 */
/* 1、后代选择器,选择器嵌套即可 */
/* 2、子代选择器,前面使用> */
/* 3、交集选择器,前面使用&(&表示这一级选择器) */
/* 4、并集选择器,前面直接写, */
/* 5、伪元素,前面使用&(&表示这一级选择器) */
.father {
width: 600px;
height: 600px;
background-color: pink;
/* 伪元素 */
&::after {
content: '';
}
/* 交集选择器 */
&.active {
background-color: red;
}
/* 后代的关系,直接嵌套即可 */
.son {
width: 400px;
height: 400px;
background-color: blue;
>.sun {
width: 200px;
height: 200px;
background-color: yellow;
}
}
/* 并集选择器 */
.box1,
.box2 {
width: 100px;
height: 100px;
background-color: orange;
}
}
less的运算
在less代码中可以直接写加减乘除进行计算
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 伪类的写法 */
&:hover {
/*less中可以直接计算加减乘除计算的,编译之后会把计算的结果直接显示在css文件中。 */
width: 200px / 3;
width: 200px * 2;
width: 200px + 100px;
width: 200px - 100px;
}
}
less的函数(了解)
针对于css中重复的样式,除了可以使用定义公共类的方式,还可以使用less中的函数来处理(函数在之后的js会详细说到,先简单了解下)
/* 以下代码重复过多,可以用less精简 */
.red {
width: 300px;
height: 300px;
background-color: red;
}
.blue {
width: 300px;
height: 300px;
background-color: blue;
}
.green {
width: 300px;
height: 300px;
background-color: green;
}
代码优化如下:
/* 在less中也一种处理重复样式的方法:函数。直接在选择器里面使用 */
/* 函数的写法和定义公共类很像,后面需要加上括号 */
/* 定义函数 */
.common() {
width: 300px;
height: 300px;
}
.red {
/* 使用函数 */
.common();
background-color: red;
}
.blue {
.common();
background-color: blue;
}
.green {
.common();
background-color: green;
}
拓展:
函数里面可以传参,让函数中样式的取值变化(变化的量→变量)
比如让红盒子
100*100
, 蓝盒子200*200
,绿盒子300*300
.common(@value) {
width: @value;
height: @value;
}
.red {
/* 使用函数 */
.common(100px);
background-color: red;
}
.blue {
.common(200px);
background-color: blue;
}
.green {
.common(300px);
background-color: green;
}