526互联

less

发布时间 2023-03-25 23:59:27作者: 转角90

注释

  • // 注释1
  • /* 多行注释*/

变量

// less 变量
// @变量名：变量值
@mainColor:#334455;
.box{
    background-color:@mainColor;
}

嵌套

/* 
	嵌套 
*/
.box{
    .child{
        color:blue;
    }
    .child2{
        color:red;
	}
    &:hover{
        cursor:pointer;
    }
}

运算

  • 单位以最左侧单位为准
.box{
    background-color:#333333+#444444;
    width:100px*2+10%  // 210px
}

混合

.box{
    font-size:20px;
}
// 混入传参
.box_border(@borderWidth:5px,@borderColor:red){
    border:@borderWidth solid @borderColor
}

// 混入和映射结合使用.box_size()[width],弥补less中无法自定义函数
.box_size{
    width:100px;
    height:100px;
}

.box1{
    width:.box_size()[width]; 
    color:red;
    .box()
    .box_border(10px,#444444)
}
.box2{
    width:200px;
    color:blue;
    .box()
    .box_border(10px,#555555)
}

继承

// 并集，相对应用少
.box_border{
    border:5px solid #FFD;
}
.box{
    width:200px;
    &:extend(.box_border);
}
/*
.box_border,.box{
	 border:5px solid #FFD;
}
*/

内置函数

  • color(red): 转为RGB16进制颜色
  • convert(100px,'in') : 转换单位，
  • ceil(10.5px): 向上取整
  • floor(10.5px): 向下取整

作用域

  • 先在本地查找变量和混入
  • 如果找不到，则从父级作用域继承

导入

@import './xx.less' // .less可以省略

映射

#box(){
    width:100px;
    height:100px;
}
.box_1{
    width:#box[width];
}