Less使用方式汇总

嵌套使用方式

// 1. 嵌套使用方式
.wrapper .box1{
    width:  200px;
    height: 100px;
    font-size:  20px;
}

使用变量方式

// 使用声明变量的方式

@ColorA: pink;
@ColorB: yellow

.box1 {
    background-color: @ColorA;
}

.box2{
    background-color: @ColorB;
}

使用混合的方式

// 3.带参混合的方式
.borderA(){
   border: solid 1px black;
}

.box1 {
    width:  100px;
    .borderA()
}

.box2 {
    width: 100px;
    .borderA()
}


//1.普通混合
.bor{
    background-color: aqua;
    width: 32rpx;
}
.poop{
    color:white;
    .bor;
}

运算的方式

// 4. 对 数字 颜色 变量之间 进行 加 减 乘 除 运算

@number1: 1cm + 2cm
@number2:  @number1 * 2
@Color: #234234 + #234234

使用转义的方式

// 5.  可以使用任意字符串 作为属性 和 变量值。 转义形式 ~'val'或者 ~'val'

@min768: ~'(max-with: 768px)'

@media @min768 {
    body{
        background-color: antiquewhite;
    }
}

命名空间方式

/ 使用命名空间的形式

#module(){
    .style{
        width: 100px;
        height: 100px;
    }
}

.box{
    #module.style()
}

映射的方式

// 使用映射的方式

#module() {
    color1: pink
}

.box {
    color: #module[color1]
}

import导入的方式

@import './module.less';

body{
    background-color: red;
    columns: @num;
}

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

1.变量

2.混入

3.嵌套

4.@规则嵌套和冒泡

5.运算

6.作用域

7.@import 导入