less 学习笔记

1 什么是less

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性,less 编译工具koala.exe

2 less语法

less中有很多的语法规则，但个人觉得less中比较常用的也是最重要的就下面几个：

变量、混合规则（mixin）、模式匹配、嵌套，& 指代上一层的选择器

不常用的：arguments 避免编译 ！important

1. 先来看下变量的简单用法，less中有变量运算，(参与运算任何一个参数带有单位即可)

//less 重点
//变量
//mixin 混合
//模式匹配
//嵌套规则

@test-width:100px;
@test-size:12px;
.wrap{
    color: red;
    width:(@test-width*3);
    font-size: @test-size*12;
    height: @test-width+12;
}

编译产出物，就是css啦

.wrap {
  color: red;
  width: 300px;
  font-size: 144px;
  height: 112px;
}

2. 混合规则（mixin）,相当于定义一个类，在别的类中直接包含进来，看下具体情况吧

@test-width:100px;
@test-size:12px;
.wrap{
    color: red;
    width:(@test-width*3);
    font-size: @test-size*12;
    height: @test-width+12;
    /*下面是mixin进来的default-border的样式*/
    .default-border;
}

.default-border{
    border: solid 1px red;
    box-shadow: 0px 0px;
}

对应的css编译结果为==>

.default-borde会出现在css中，如果是定义成

.default-border(@varName){...}这个不会出现在产出物css中，定义的产出物只会出现在mixin中,看下面的代码-2

.wrap {
  color: red;
  width: 300px;
  font-size: 144px;
  height: 112px;
  /*下面是mixin进来的default-border的样式*/
  border: solid 1px red;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
}
.default-border {
  border: solid 1px red;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
}

代码2-

 1 .border01(@b1){
 2     border: solid @b1*10 red;
 3 }
 4
 5 .width-1(@w1:100px;){
 6     font-size:@w1;
 7     border-radius: @w1 - 14;
 8 }
 9
10 .test{
11     .border01(3);
12     .width-1();
13 }

产出物代码2-

1 .test {
2   border: solid 30 #ff0000;
3   font-size: 100px;
4   border-radius: 86px;
5 }

3.模式匹配

预先定义一系列的类，这些都会有不同的参数，不同的参数其内部的样式是不同的，mixin的时候根据传入的参数不同而自动匹配到不同的类

例如：四个不同方向的箭头

 1 //direction bottom:
 2 .tg(bottom){
 3     border-width: @test-width - 70;
 4     border-color: red transparent transparent  transparent ;
 5     border-style: solid dashed dashed dashed ;
 6 }
 7 //direction right:
 8 .tg(right){
 9     border-width: @test-width - 70;
10     border-color:  transparent transparent  transparent red ;
11     border-style:  dashed dashed dashed  solid;
12 }
13 //direction left:
14 .tg(left){
15     border-width: @test-width - 70;
16     border-color:  transparent red transparent  transparent  ;
17     border-style:  dashed solid dashed dashed  ;
18 }
19 //不管匹配到哪一个，这个一定会匹配到的，@_必须这种写法，所有的参数必须保持一致
20 .tg(@_){
21     width: 0;
22     height: 0;
23     overflow: hidden;
24 }
25
26 .sj{
27     .tg(bottom);
28 }

对应产出物==> 所有.tg不出出现在css中,只有.sj会出现在css中

1 .sj {//这就是想下的箭头
2   border-width: 30px;
3   border-color: red transparent transparent  transparent ;
4   border-style: solid dashed dashed dashed ;
5   width: 0;
6   height: 0;
7   overflow: hidden;
8 }

3.嵌套规则和 &

 1 .list{
 2     margin: 0;
 3     padding: 0;
 4     list-style:none;
 5     li{
 6         width: 100px;
 7         height: 50px;
 8     }
 9     a{
10         float: left;
11         border:solid 1px red;
12         //&代表他的上一层选择器符号
13         &:hover{
14             background: red;
15         }
16     }
17 }

产出物==>

 1 .list {
 2   margin: 0;
 3   padding: 0;
 4   list-style: none;
 5 }
 6 .list li {
 7   width: 100px;
 8   height: 50px;
 9 }
10 .list a {
11   float: left;
12   border: solid 1px red;
13 }
14 .list a:hover {
15   background: red;
16 }

4. 其他不重要的

arguments

.t-arguments(@style:solid,@width:1px,@color:#ffddff){
    border: @arguments;
}
.test-arguments{
    .t-arguments(dashed,5px);
}

output==>

.test-arguments {
  border: dashed 5px #ffddff;
}

避免编译

1 /*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/
2 .t-comile{
3     width:calc(210px-20px);
4 }
5 /*避免编译*/
6 .t-cancel-compile{
7     width: ~‘calc(210px-20px)‘;
8 }

output==>

1 /*koala 会吧210px-20px编译，这不是我们想要的，calc是css3的属性，应交给浏览器编译*/
2 .t-comile {
3   width: calc(190px);
4 }
5 /*避免编译*/
6 .t-cancel-compile {
7   width: calc(210px-20px);
8 }

!important,会把所有的mixin进来的所有的属性都后缀加上！important

.t-important(@width:200px,@height:200px){
    width: @width;
    height: @height;
}
.test-important{
    .t-important() !important;
}

output==>

.test-important {
  width: 200px !important;
  height: 200px !important;
}