less:css预处理器
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": "./" } //(compress:移除不必要的空格) //(sourceMap:生成map文件) //(out:生成css文件位置)
-
重启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)";
// ~" "引号当中的东西不会被编译
}