less的初步学习

1. 注释
   在less文件中的/**/的注释会显示在css文件中，而//的注释则不会
2. 中文编码
   在less文件顶部加上字符集提示“@charsetUTF-8’”
3. 变量（variables）
   1）普通的变量

    html:
    <header><h1>1</h1></header>
    <footer><h1>2<h1></footer>
    less:
    @bgColor:green
    @fontColor:#FFF
    header,footer{
        background:@bgcolor
        h1{
            color:@fontColor
        }
    }

2）作为选择器和属性名的变量

    html:
        <div class="width"></div>
    less:
        @w:width
        @{w}{
            @w:59px;
        }   

3 )作为URL的变量

    @logoUrl:'https://baidu.com/img/'
    less:
    header{
        background:url("@{logoUrl}logo.jpg")
    }

4）变量是延迟加载的，变量无需再使用前申明，同样能正常使用
5）定义相同变量时，后申明的变量优先级高，其会生效
4. 混合：混合就是将一系列属性从一个规则集里引入到另外一个规则集里的方式
1）普通混合

    css：
    .font_sc{font-size:12px;color:red}
    h1{font-size:12px;color:red;line-height:24px}
    h2{font-size:12px;color:red;line-height:25px}

    less:
    .font_sc{font-size:12px;color:red}
    h1{line-height:24px;.font_sc;}
    h2{line-height:25px;.font_sc;}

2 )不带输出的混合：即不输出相同样式的css对象，对其不编译到css里面(对比上面的代码)

    css：
    h1{font-size:12px;color:red;line-height:24px}
    h2{font-size:12px;color:red;line-height:25px}

    less:
    .font_sc(){font-size:12px;color:red}
    h1{line-height:24px;.font_sc;}
    h2{line-height:25px;.font_sc;}

3）带选择器的混合

    .hover(){
        &:hover{
            background:red;
        }
    }

    button{
        .hover();   
    }

    css:
    button:hover{background:red}

4）带参数的混合

.border(@border_color){
    border:1px solid @border_color
}

div{
    .border(#FFF)
}
css:
div{border:1px solid #FFF}

5 )带参数有默认值的混合

.border(@border_color:red){
    border:1px solid @border_color
}

div1{.border(#FFF)}
div2{.border()}
css:
div1{border:1px solid #FFF}
div2{border:1px solid red}