仿写京东之巧用less解决权重问题

less

• css的预编译语言，浏览器本身是不支持less的，所以需要将less转成css
• less只是为了开发方便用的
• VScode安装Easy Less插件：当创建好.less文件，vscode会自动识别这样的文件，将其编译成css；

css : 让css具有编程语言的特点； 预编译css；浏览器是不识别less语言的；所以需要用js解析less;或者是直接将less转成css文件，然后进行引用；
less : 预编译的语言 类似的有sass
Less只用于开发，不用于上线；在项目上线之前，把less改写成css,然后最后还是把css上线

解决css的层级和嵌套问题；
1.解决了css编译的权重问题；
2.让less具有编程语言的特点；

// less中定义的变量还存在变量提升的特点；
//1. 定义变量
@w:100px;

// 2. 变量定义公共的图片路径
// images
@URL:"../images/";
// 定义的变量，如果私有作用域存在，就不再向上查找了；
.box{
    @w:300px;
    width:@w;
    .box1{
        height:@w;
        background:url("@{URL}1.jpg");
    }
    .box2{
        background:url("@{URL}2.jpg");
    }
}

//3. 函数的封装
//4. 如果在类名后面加上小括号，那么就不再进行编译了；
.public()  //可以看做函数，不进行编译
.public  //可以看做类
.public(@a){
    width:@a;
    height:100px;
}
.box{
    .public(@a:200px);
}

.public{
    width:300px;
    height:500px;
}

//5. &: 连接符；
//6. &:extend(.public);//继承属性
.box{
    width:100px;
    &:hover{
        background:red;
    }
    &-box1{
        width:99px;
    }
    //.public; 冗余的代码比较多；
    &:extend(.public);//继承属性
}

//mix ： 可以有判断条件；
.layout(@a) when(@a<100){
    background: red;
}
.box{
    .layout(990)
}