CSS3预处理器 --- Less

1. less

1.1 less中的单行注释,注释中的内容不会被解析到css文件中
1.2 css中的注释,内容会被解析到css文件中

2.less变量：在变量中可以储存一个任意的值,并且可以在需要时,任意的修改变量中的值

2.1 less变量的语法：@变量名
    @a: 200px;
    @b: #fa3c;
    @c: box6;

    .box {
        //使用less变量时,如果时直接使用以 @变量名 的形式使用    
        width: @a;
        color: @b;
    }

2.2 作为类名：或者一部分值使用时必须以 @{变量名} 的形式使用
    @c: box6;
    .@{c} {
        width: @a;
        background-image: url('@{c}/1.png');
    }

2.3 变量发生重名时,会优先使用比较近的变量
    @a: 200px;
    @a: 300px;
    .div {
        width: @a;
    }

2.4 新的版本语法
    .div {
        width: 100px;
        height: $width;
    }

    .box1 {
        .box2 {
            color: red;
        }

        .box3 {
            color: red;

            //为box3设置一个hover,& 表示外层的父元素
            //.box1 .box3:hover {color: orchid;}
            &:hover {
                color: orchid;
            }

        }

        //为box1设置一个hover,& 表示外层的父元素
        //.box1:hover {color: orange;}
        &:hover {
            color: orange;
        }

        //div .box1 {width: 100px;}, &表示外层的父元素
        div &{
            width: 100px;
        }
    }

3. less继承语法

3.1 方式一：
     1. 语法：:extend() 对当前选择器拓展指定选择器的样式 (选择器分组)
        .p1{
            width: 100px;
            height: 100px;
        }

     2. .p2 继承 .p1样式,并且拥有独有的样式
        .p2:extend(.p1){
            color: red;
        }

3.2 方式二：
    .p3{
        text-align: center;
        width: 200px;
    }

    .p4{
        //直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了赋值
        //mixin 混合
        .p3()
    }
    

4. less混合函数语法

4.1 注意点：定义几个参数,必须传递几个参数
4.2 使用类选择器时可以在选择器后边添加一个括号,这时就创建了一个mixins函数
    .p5(){
        width: 100px;
        height: 100px;
        text-align: center;
    }

    .p6{
        //.p5()
        .p5 //简写
    }

4.3 混合函数 在混合函数中可以直接设置变量
    .test(@w,@h,@color){
        width: @w;
        height: @h;
        color: @color;
    }

    div{
        //调用混合函数,按照顺序传递参数
        .test(200px,300px,red)
    }

    div1{
        //调用混合函数,按照样式名称传递参数
        .test(@color:red,@h: 200px,@w: 200px)
    }

    4.4 混合函数 也可以指定默认值
    .test1(@w: 100px){
        width: @w;
    }
    div2{
        .test1()
    }

    box1{
        //在less中所有的数值都可以直接进行运算
        // + - * /
        width: 100px + 100px;
        height: 100px / 2;
    }

5. less也支持 import

5.1 可以模块化分成多个less文件,

5.2 1负责定义变量 ,2.定义动画效果 ,3.定义布局相关 ,4.负责整合

5.3 模块化好处：方便后期维护

@import './style1.less';