less学习

2017-09-16

less学习

1.常量

常量的声明：@常量名：数值;
常量的使用：@常量名

2.混合

混合的使用：可以使用定义过的class如：

.border(){
    border:2px solid black
}
.btn{
    width:100px;
    height:100px;
    .border;
}

也可以传入参数如:

.border(@width){
    border:@width solid black
}
.btn{
    width:100px;
    height:100px;
    .border(2px);
}

初始化参数：

.border(@width:2px){
    border:@width solid black
}
.btn{
    width:100px;
    height:100px;
    .border();
}

3.匹配模式

编写三角

.sanjiao{
    width: 0px;
    height: 0px;
    border-width: 10px;
    border-color: red transparent transparent transparent;
    border-style: solid;
}

//匹配模式 类似编程思想if判断
.triangle(top,@w:5px,@c:black){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: solid;
}

.triangle(bottom,@w:5px,@c:black){
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid;
}
//调用
.sanjiao{
    width: 0px;
    height: 0px;
    .triangle(bottom);
}
//每次调用都存在一个等同于回掉函数的存在即
.triangle(@_,@w:5px,@c:black){
    width: 0px;
    height: 0px;
}
//@_：是一个固定模式，现在每次调用.triangle都会调用上面的css 代码

4.运算

可以在css代码中进行加减乘除运算。还可以进行颜色的加减法运算，不过一般不使用。

5.嵌套规则

//html代码
<ul class="list">
    <li><a href="#">这是测试文字1<span>10:01</1span></a></li>
    <li><a href="#">这是测试文字2<span>10:01</1span></a></li>
    <li><a href="#">这是测试文字3<span>10:01</1span></a></li>
</ul>

//less代码
.list{
    margin:0px;
    padding:0px;
    list-style: none;

    li{
        height: 30px;
        line-height: 30px;
        color: black;
        margin-bottom: 5px;
    }
    a{
        float: left;
        //& 上一层选择器
        &:hover{
            color: red;
        }
    }
    span{
        float: right;
    }
}

6.arguments变量

.border_arg(@w:2px,@c:red,@xx:solid){
    border:@arguments;
}

.text_border{
    .border_arg();
}

//编译的css
.text_border {
  border: 2px red solid;
}

7.避免编译

对于less无法识别的字符，进行该操作，比如微软的滤镜之类。

//css3新方法calc，浏览器会计算这里面的值并显示
.text_03{
    width:calc(300px-30px);
    height: 100px;
    background-color: red;
}
//编译出来的css为
.text_03 {
  width: calc(270px);
  height: 100px;
  background-color: red;
}
//但我们想要的效果并不是这样，我们想要浏览器自动运算，需要less不执行这一段的编译，只需要加上~'',即可。
.text_03{
    width:~'calc(300px-30px)';
    height: 100px;
    background-color: red;
}
//编译后为
.text_03 {
  width: calc(300px-30px);
  height: 100px;
  background-color: red;
}
//我本人在编写这一段代码的时候遇到一个问题，在less中编写
.text_03{
    width:calc(300px -30px);
    height: 100px;
    background-color: red;
}
//即300px 后面多了一个空格，编译后的css为
.text_03 {
  width: calc(300px -30px);
  height: 100px;
  background-color: red;
}
//看着和避免编译后的结果是一样的，其实不然，浏览器并不能执行。但是如果改成
.text_03 {
  width: calc(300px- 30px);
  height: 100px;
  background-color: red;
}
//编译成css后就和没有避免编译后的结果一样