less基本使用

Posted 2020-12-01 nanhuaqiushui

定义变量

@ly_width:100px;
.box {
    width:@ly_width;
}

混合

// 不带参混合
@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
    border:1px solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border;
}

// 带参混合
@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width) {
    border:@border_width solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border(1px);
}

匹配模式

.border(left;@border_width:5px;@border_color:red){
    border-left:@border_width solid @border_color;
}
.border(@_,@border_width:5px;@border_color:red){
    border-color:yellow;
}
.border_use1 {
    //选择和if差不多 如果是left就调用上面对应的
    .border(left);
}

运算

@ly_width:100px;
.one {
    width:@ly_widht + 100;
}

嵌套

@arguments变量

.border(@border_width;@border_style;@border_color){
    border:@arguments;
}
.one {
    .border(1px;solid;red);
}