less简介
less的概念
less是css的一门预处理语言
-
less是css的一个增强版,通过less可以编写更少的代码实现更强大的样式
-
在less中增添了许多新特性:像对变量的支持丶对mixin的支持
-
less的语法大体上和css语法一致,但是less中增添了许多对css的扩展
-
所以浏览器无法直接执行less代码,要执行必须先将less转换成css,然后再有浏览器执行
安装扩展插件
- 在vscode的的扩展中搜索easy-less并安装
- 插件作用:在编写less文件时保存自动生成css后缀文件
less用法
- 创建一个less文件后缀,如style.less,在文件中编写如下代码
body{
width: 500px;
height: 500px;
div{
width: 200px;
height: 200px;
background-color: red;
}
}
- ctrl+s保存后生成对应style.css,代码如下
body {
width: 500px;
height: 500px;
}
body div {
width: 200px;
height: 200px;
background-color: red;
}
- 在HTML中引入
style.css
文件,有如下效果
基本语法
注释
- // less中的单行注释,内容不会被解析到css中;需要注释的代码前//即可
- / *css中的注释,内容会被解析到css文件中 */
//less中的单行注释,注释中的内容不会解析到css中
/* css中的多行注释,内容会被解析到css文件中*/
关系嵌套
- 在less中,父子关系可以直接嵌套,书写起来结构更加清晰
less文件
.box{
width: 500px;
height: 500px;
background-color: #bfa;
.box1{
width: 200px;
height: 200px;
background-color: orange;
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
}
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
}
自动生成css代码
.box {
width: 500px;
height: 500px;
background-color: #bfa;
}
.box .box1 {
width: 200px;
height: 200px;
background-color: orange;
}
.box .box1 .box3 {
width: 100px;
height: 100px;
background-color: greenyellow;
}
.box .box2 {
width: 200px;
height: 200px;
background-color: blue;
}
变量
- 变量:在变量中可以存储一个任意的值
- 并且我们可以在修改时,任意改变变量的值
- 变量的语法:@变量名
//变量,在变量中可以存储一个任意的值
//并且我们可以在修改时,任意改变变量的值
//变量的语法:@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
//使用变量时,如果是直接使用则以@变量名的形式使用即可
width: @a;
color: @b;
}
//作为类名或者一部分值来使用时,必须以@{变量名}的形式使用
.@{c}{
width: @a;
background-image: url("@{c}/1.png ");
}
@d:150px;
@d:200px;
div{
//变量发生重名时,按优先级使用。此处涉及作用域和变量提升等问题
@d:120px;
width: @d;
height: @e;
}
//可以在变量声明前就使用变量(变量提升)
@e:335px;
div{
width: 300px;
height: $width;
}
混合函数
- 混合函数:在混合函数中可以直接设置变量,,可给参数设置初始变量
.test(@w:100px, @x:200px, @y:1px){
width: @w;
height: @x;
border: @y;
}
div{
//调用混合函数,按顺序传递(此处涉及参数,传参等概念)
.test(200px,200px,1px)
//不按顺序传方法
//.test(@y:1px,@w:200px,@x:200px)
}
//less提供了许多设定好的函数,如average,darken等
补充
- 以下详细用法见代码注释
& :extend() .p4()
.box1{
//为box1设置hover
//&层就表示外层的父元素
&:hover{
color: orange;
}
}
.p1{
width: 100px;
height: 200px;
}
//extend(),对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
color: red;
}
.p3{
//直接对指定的样式进行引用,这里就相当对p1的样式进行了复制
//mixin 混合
.p1();
}