less：css预处理器
less官网
less是一门CSS预处理语言，它拓展了CSS语言，增建了==变量、混合、函数==等特性，使CSS更易维护和拓展。less可以运行在Node或浏览器端。常用css预处理器还有sass，stylus。
less在vscode中的使用
Easy LESS的功能：当你新建一个.less文件时，会自动将它编译，并生成相同名称的.css文件
-
在插件市场搜索并安装插件：Easy LESS -
点击左下角的设置按钮，选择设置，搜索easy，选择在setting.json中编辑 "less.compile": {
"compress": false,
"sourceMap": false,
"out": "./"
}
-
重启vscode
less中的注释
- 以//开头的注释，不会被编译到css文件中
- 以/**/包裹的注释会被编译到css文件中
less中的变量
使用**@**来声明一个变量：@color:pink
-
作为普通属性值来使用:直接使用@color @color:pink;
.class{
color：@color
}
-
作为选择器和属性名：#{pink}的形式 @m:#wrap;
@{m}{
height:100px;
}
-
作为URL：@{URL} -
变量的延迟加载 @var:0;
.class{
@var:1;
.brass{
@var:2;
three:@var;
@var:3;
}
one:@var;
}
编译生成的css文件： .class {
one: 1;
}
.class .brass {
three: 3;
}
less中的嵌套规则
-
基本嵌套规则 -
&的使用 &代表平级，通常配合伪类使用！！！ @color:pink;
@selector:#wrap
@{selector}{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: @color;
height: 100px;
width: 100px;
&:hover{
background:green;
}
}
}
less中的混合
混合：将一系列属性从一个规则集引入到另一个规则集的方式
-
普通混合 .juzhong{
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: pink;
height: 100px;
width: 100px;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong;
}
.inner2{
.juzhong;
}
}
-
不带输出的混合:是指输出时，不会将混合样式输出到编译后的.css文件中 .juzhong(){
/*在不想输出的样式后面加上括号就可以*/
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: pink;
height: 100px;
width: 100px;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong;
}
.inner2{
.juzhong;
}
}
-
带参数的混合 .juzhong(@w,@h,@c){
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background:@c;
height: @h;
width: @w;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong(100px,100px,pink);
}
.inner2{
.juzhong(150px,50px,pink);
}
}
-
带参数并且有默认值的混合 .juzhong(@w:150px,@h:50px,@c:green){
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background:@c;
height: @h;
width: @w;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong(100px,100px,pink);
}
.inner2{
.juzhong();
}
}
-
带多个参数的混合 上面全都是QwQ -
命名参数 .juzhong(@w:150px,@h:50px,@c:green){
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background:@c;
height: @h;
width: @w;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong(100px,100px,pink);
}
.inner2{
.juzhong(@c:black);
// 如果不使用命名参数，就会默认将black认为是第一个属性的参数
}
}
-
匹配模式 .triangle(@_,@w,@c){
// @_:每次调用同名函数，都会先调用它
width: 0px;
height: 0px;
border-style: solid;
overflow: hidden;
}
.triangle(L,@c,@w){
border-width: @w;
border-color: transparent transparent transparent @c;
}
.triangle(R,@c,@w){
border-width: @w;
border-color: transparent @c transparent transparent;
}
.triangle(T,@c,@w){
border-width: @w;
border-color: @c transparent transparent transparent;
}
.triangle(B,@c,@w){
border-width: @w;
border-color: transparent transparent @c transparent;}
#wrap > .sjx{
.triangle(T,pink, 40px)
}
-
arguments变量 .border(@1,@2,@3){
border: @arguments;
}
#wrap > .sjx{
.border(1px,solid,black);
}
编译后的css #wrap > .sjx {
border: 1px solid black;
}
less中的计算
// 编译前
#wrap > .sjx {
width: (100+100px);
height: (100px+50);
background-color: pink;
}
// 编译后
#wrap > .sjx {
width: 200px;
height: 150px;
background-color: pink;
}
less中的继承
性能比混合高
灵活度比混合低
.center{
position: absolute;
left: 0;
right:0;
top: 0;
bottom: 0;
margin:auto;
}
*{
margin: 0;
padding:0;
}
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner:extend(.center){
// :extend()是继承混合
&:nth-child(1){
width: 100px;
height: 100px;
background: pink;
}
&:nth-child(2){
width: 50px;
height: 50px;
background: deeppink;
}
}
}
less中的避免编译
*{
margin: 100*10px;
padding:~"cacl(100px+100)";
// ~" "引号当中的东西不会被编译
}
|