less学习

 编译工具：

• koala编译  http://koala-app.com/index-zh.html
• node.js库
• 浏览器端使用

 

1.less中的注释

• 可使用/**/
• 还可使用//  （编译时会被自动过滤）

2.less中的变量

less中声明一个变量  @变量名：值

@test_width:300px;
.box{
   width:@test_width;
}

3.less中的混合（Mixin）

• 混合变量

  .border{
       border:solid 10px red;
  }
  .box2{
      .border;
       margn-left:100px;
  }

   

• 带参数的混合

  .border_02(@border_width){
      border:solid yellow @border_width;
  }
  .test_mixin{
      .border_02(30px);
  }

  .border_03(@border_width:10px){
      /*带默认参数*/
      border:solid green @border_width;
  }
  .test_mixin_03{
      .border_03();
  }

  实例：

  .border_radius(@radius:5px){
      -webkit-border-radius:@radius;
      -moz-border-radius:@radius;
      border-radius:@radius;
  }
  .radius_test{
      width:100px;
      height:50px;
      .border_radius(10px);
  }

 

4.less中的匹配模式

相当于JS中的if(不完全是)，满足条件后才能匹配

用CSS实现下三角形：

.triangle{
    width:0;
    height:0;
    overflow:hidden;  /*处理IE6最小高度问题*/

    border-width:10px;
    border-color:red transparent transparent transparent;
    border-style:solid dashed dashed dashed;

; }

 用匹配模式：

.triangle（top,@w:5px,@c:#ccc）{
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:dashed dashed solid dashed;
}
.triangle（bottom,@w:5px,@c:#ccc）{
    border-width:@w;
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}
.triangle（left,@w:5px,@c:#ccc）{
    border-width:@w;
    border-color:transparent @c transparent transparent;
    border-style:dashed solid dashed dashed;
}
.triangle（right,@w:5px,@c:#ccc）{
    border-width:@w;
    border-color:transparent transparent transparent @c;
    border-style:dashed dashed dashed solid;
}

.triangle（@_,@w:5px,@c:#ccc）{
    /*@_代表始终带上这部分*/
    width:0;
    height:0;
    overflow:hidden;
}

.div-triangle{
    .triangle(bottom,100px);
}

 

5.less中的运算

任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中  （+-*/）

@test_01:300px;

.box_02{
    width:(@test_01-20)*5;
    color:#ccc-10;
}

 

6.less中的@arguments变量

@arguments包含了所有传递进来的参数，若不想单独处理每一个参数的话可以这样写

.border-arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}

.test-arguments{
    .border-arg(40px);
}

 

7.less中的嵌套规则

1. &对伪类的使用 （hover或focus）
2. 对连接的使用 （&-item）

   ul{
       width:600px;
       margin:30px auto;
       padding:0;
       list-style:none;
   
       li{
           height:30px;
           line-height:30px;
           background-color:pink;
           margin-bottom:5px;
       }
       a{
           /*li中嵌套的a标签，放在ul下比较好，这样可以较少匹配*/
           fioat:left;
   
           /*& 代表它上一层选择器*/
            &:hover{
                color:red;
            }
       }
   }

    

8.less中的避免编译

有时我们需要输出一些不正确的CSS语法或使用一些less不认识的专有语法，输出时可以在字符串前加一个~

.test_03{
    width:~' calc(100% - 35px) ' ;
}

 

9.less中的!important关键字

会为所有混合所带来的样式添加!important

.test-important{
    .border_03() !important;
}

 

Less中文网： http://less.bootcss.com/

参考：慕课网-less即学即用 http://www.imooc.com/learn/102