less是什么
less是css的超集，css有的less有,css没有的less也有。比如函数、变量、新书写规则浏览器不认识less 但是可以借助于插件将less 转换成css 浏览器最终还是识别的是css 只是这个css是有less编译过来的vscode插件：easy less
注意：安装less的时候需要在setting.json文件中添加
"less.compile": {
"out": "../css/"
}
好处
语法简洁以易懂，基本和css一致有了函数和变量，省事让代码结构清晰，好折叠
less的使用
注意：less的/**/注释会编译到css文件中，增加文件大小，而//注释不会
less的嵌套
后代选择器: 直接嵌套即可
.father {
width: 200px
;
height: 200px
;
background-color: red
;
>.son {
width: 100px
;
height: 100px
;
background-color: green
;
.sun {
width: 50px
;
height: 50px
;
background-color: blue
;
}
}
子代选择器: >
.father {
width: 200px
;
height: 200px
;
background-color: red
;
.son {
width: 100px
;
height: 100px
;
background-color: green
;
.sun {
width: 50px
;
height: 50px
;
background-color: blue
;
}
}
并集选择器: , (选择a和b)
.father {
width: 200px
;
height: 200px
;
background-color: red
;
.son1,
.son2 {
width: 100px
;
height: 100px
;
background-color: pink
;
}
}
交集选择器: 使用& &代表自己 （选择既满足a又满足b的元素）
.father {
width: 200px
;
height: 200px
;
background-color: red
;
&.active {
background-color: gold
;
}
}
伪元素: 使用& &代表自己
.father {
width: 200px
;
height: 200px
;
background-color: red
;
&::after {
content: '';
}
}
伪类: 使用& &代表自己
.father {
width: 200px
;
height: 200px
;
background-color: red
;
&:hover {
background-color: #fff
;
}
}
less计算
@变量名: 变量值; 例：
@val: 100px;
.box {
width: @val + 200px;
height: 100 * 100px
;
border: 10px / 5 solid #ccc
;
width: 59 / 50rem
;
}
less函数
less的函数就是将一些复用的css做成一个函数 供css使用
less的函数的声明 .自定义函数名 () {}
less的函数是不会编译到css当中去的，调用时将复用的css复制粘贴到调用位置
less函数的使用: 直接在css里面调用即可
调用语法: .自定义函数名 (); 例：设置版心公共类和居中效果
.w() {
width: 1200px
;
margin: 0 auto
;
}
.center() {
position: absolute
;
left: 50%
;
top: 50%
;
transform: translate(-50%, -50%
);
}
header {
.
w();
.
center();
}
nav {
.
w();
.
center();
}
section {
.
w();
.
center();
}
less传参
函数传参的过程
参数的传递过程: 调用函数的时候将函数小括号的值传递给声明函数里面的变量, 如果调用函数的小括号里面没有值会使用默认值,默认值在函数形参中设置
@val: 15px;
函数声明
.br
(@val: 10px) {//默认值为10px
-webkit-border-radius: @val;
-moz-border-radius: @val;
-ms-border-radius: @val;
-o-border-radius: @val;
border-radius: @val;
}
header {
// 10px
// 函数调用
.
br();
}
nav {
// 5px
// 函数调用
.
br(5px
);
}
section {
// 15px
// 函数调用
.
br(15px
);
}
footer {
// 20px
// 函数调用
.
br(20px
);
}
