Less
概览
安装:
npm i less -D
只要安装了 less,即使没有使用构建工具,也可以通过 lessc
手动编译 less 文件。例如:
# 编译less文件为css文件,可指定输出文件名
npx lessc foo.less foo.css
# 编译less文件为css文件,并输出到控制台
npx lessc foo.less
变量声明
格式:@变量名: 值;
@test_width: 300px;
.box {
width: @test_width;
}
导入
可以导入别的 less 文件,也可以导入 css 文件
@import 'reset.less';
@import 'base.css';
这样就可以使用在别的文件中定义的变量
混合(mixin)
可以混合嵌套使用别的样式
1、示例
.box1 {
}
.box2 {
.box1;
height: 100px;
}
.box1;
可以写成 .box1();
2、可以传递参数:
.box3(@test_ml) {
margin-left: @test_ml;
}
// 传参
.box2 {
.box3(10px);
}
3、传参可以设置默认值:
.box3(@test_ml: 20px) {
margin-left: @test_ml;
}
.box2 {
.box3(); // 需要修改默认值可传参 .box3(30px)
}
4、仍然能添加!important
.box2 {
.box3(10px) !important;
}
运算
可进行 + - * /
运算,数值可以不带单位
@test_1: 300px;
.box4 {
width: @test_1 + 10;
height: (@test_1 - 250) * 2;
}
@arguments
包含了所有传递进来的参数
.border_1(@w: 1px, @s: solid, @c: #f00) {
// 不用写成 border: @w @s @c;
border: @arguments;
}
避免编译
加上 ~
波浪号
.test_2 {
width: ~'calc(300px - 100px)';
}
匹配模式
例如画小三角
/*箭头朝上*/
.triangle(top, @w: 10px, @c: #f00) {
border-width: @w;
border-style: dashed dashed solid dashed;
border-color: transparent transparent @c transparent;
}
/*箭头朝下*/
.triangle(bottom, @w: 10px, @c: #f00) {
border-width: @w;
border-style: solid dashed dashed dashed;
border-color: @c transparent transparent transparent;
}
/*箭头朝左*/
.triangle(left, @w: 10px, @c: #f00) {
border-width: @w;
border-style: dashed solid dashed dashed;
border-color: transparent @c transparent transparent;
}
/*箭头朝右*/
.triangle(right, @w: 10px, @c: #f00) {
border-width: @w;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent @c;
}
注意:不管匹配到哪一个,都会有固定的@_
,相当于公共部分,后面的默认参数还要带上
.triangle(@_, @w: 10px, @c: #f00) {
width: 0;
height: 0;
overflow: hidden;
}
使用:
.triangle;
再来一个定位的例子:
.pos(r) {
position: relative;
}
.pos(a) {
position: absolute;
}
.pos(f) {
position: fixed;
}
// 需要定位的盒子
.pos-box {
.pos(r);
}
嵌套规则
<ul>
<li>
<a href="#"><span>1</span></a>
</li>
<li>
<a href="#"><span>2</span></a>
</li>
<li>
<a href="#"><span>3</span></a>
</li>
</ul>