【CSS代码工程化】LESS框架运用规则：

less和css的区别：
less是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。

​ less是单行注释通过 // ，不会在css中出现。

声明变量：用 “@”创建变量。

变量分为：
全局变量：写在选择器外面的声明变量，面向整个页面。

​ 局部变量：写在选择器里面的声明变量，只能应用在当前选择器及子选择器下。

（全局变量） 例子：

// 声明变量写法，全局变量
@root: 300px;
@root1: 300px;
@root3: pink;



//调用全局变量
.box {
    width: @root;
    height: @root1;
    background-color: @root3;
}


 

（局部变量）例子：

.box3 {

    
    //box3属性内，变量为局部变量，该变量属性值，只能在该box3属性内调用
    @ziti: red;
    @kuan: 400px;
    @gao: 400px;
    @yanse: yellow;

    
    //调用局部变量
    div {
        width: @kuan;
        height: @gao;
        background-color: @yanse;
    }
   
}

嵌套：

​ 一个选择器里面可以有多个选择器，行程嵌套结构，但必须依赖于，HTML元素结构。该less嵌套结构，在输出的CSS中，为后代选择器选择的关系。

例子：

.box3 {

    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    p {
        color:red;
    }
    a{
        font-size: 15px;
    }
    
}

Mixins（混入）

它是多重继承的⼀种实现，在 LESS 中，混入是指在⼀个 class 中引入另外⼀个已经定义的 class，就像在当前 class 中增加⼀个属性⼀样

例子：

​ 比如说是，定义好一个类名，属性和声明块，给上值，下一个要是用该声明块的值，直接调用其类名就可以了。

.beijing {
    background-color: red;
}

.box1 {
    width: @root;
    height: @root1;
    .beijing    //直接调用上方的属性，使用它的属性值
}

默认不带值，通过输入值：

​ 注明：代码中 “roott”，和 括号中的样式名，，为 定义名，可随意起，必须是英文。

.roott(@width,@heigth,@color)//样式名
{
    width: @width;//属性绑定样式名
    height: @heigth;//属性绑定样式名
    background-color:@color;//属性绑定样式名
}
.box5{
    .roott(30px,30px,red);//传值
}

默认带值的情况

​ 注明：注意传入值的顺序，要传值的写在最前面，不传值的写在最后面，或者可以不写。 重要！！！！！

​ 当传入值的值，和样式名默认带的值，同时存在时，，就近原则，优先执行传入的值！！！

例子：

.roott(@color, @width: 150px, @heigth: 200px, )//括号里要传的值放最前面
{
    background-color: @color;//要传的值放最前面
    width: @width;
    height: @heigth;
}
.box5 {  //传入值
    .roott(red, 30px, 60px);//括号里要传的值放最前面
           // 当传入值的值，和样式名默认带的值，同时存在时，，就近原则，优先执行传入的值！！！
           
}

四则运算：通过加减乘除，来控制属性值的大小变化。

例子：

@root:400px;    
@root1:400px;
@root2:20px;        ///定义样式名与样式值
@root3:5px;

.box6{
    width: @root+300;//加
    
    height: @root1 - 2;//减，，   减号前后，打一个空格，防止，被误识别成属性，报错。
    
    font-size: @root2 *2;//乘
    
    border: solid (@root3/2);//除       除法必须要用括号将引入值，括起来。
}