less学习笔记

以//开头的注释不会编译到css文件中，但是/*开头的注释会被编译到css文件中

less中的变量都是在块作用域下的。

变量

less中用@声明一个变量，eg：@pink。

1.作为普通值来使用：@pink

2.作为选择器和属性名：（但是用的很少）

比如：

@m:margin;

@selector:#wrap;

*{

   @{m}:0;//这是属性名

   padding:0;

 }

@{selector}{//这是选择器

 

}

3.作为url：@{url}

4.变量的延迟加载

@val:0;

.class{

 @val:1;

    .brass{

      @val:2;

      three:@val;//less中变量都是延迟加载的，就是说这里的val会等brass作用域的变量解析完，再看val的值是多少，所以应该是3

     @val:3;

   }

 one:@val; //one:1

}

less中的嵌套规则

基本嵌套规则

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

 

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

 

&的使用

如果不用&，

#wrap{

  ...

 :hover{

 }

}

会被编译为

#wrap  :hover{

 

}

多了一个空格，想要空格没有，就得加&。因为不加&，它俩就是父子关系，想让它俩平级，就加&。

less混合

混合就是讲一系列属性从一个规则集引入到另一个规则集的方式。

#wrap{
  position:relative;
  .inner{
     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
     background:@color;
     height:100px;
     width:100px;
  }
  .inner2{
     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
     background:@color;
     height:100px;
     width:100px;
   }
}

在这段代码中，inner和inner2有大量重复代码。就可以用混合。

.mix{

     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
     background:@color;
     height:100px;
     width:100px;

}

#wrap{

   .inner{

    .mix;//混合的调用

  }

  .inner2{

   .mix;

  }

}

1.普通混合

2.不带输出的混合

 

3.带参数的混合

.mix(@width:10px,@height,@color){

     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
     background:@color;
     height:@height;
     width:@width;

}

#wrap{

  .inner{

   .mix(100,100,red);

  }

 .inner2{

   .mix(200,200,blue);

  }

}

4.带参数并且有默认值的混合

5.带多个参数的混合

 

6.命名参数（就是在传参的时候，如果顺序不对的话，告诉传入的变量对应的是哪个变量）

.inner2{

   .mix(@color:black);

}

 

7.匹配模式

想在页面画三角形，方向自定义。

triangle.less:

.triangle(@_){//如果第一个混合的第一个参数是@_，那么不管调用下面哪个混合，都会把第一个混合带上。

 width:0px;

 height:0px;

}

.triangle(L,@w,@c){

 width:0px;

 height:0px;

 border-width:@w;

 border-style:solid;

 border-color:transparent transparent transparent @c;

}

.triangle(R,@w,@c){

 width:0px;

 height:0px;

 border-width:@w;

 border-style:solid;

 border-color:transparent @c transparent transparent;

}

xx.less:

@import "./triangle.less";

#wrap .inner{

  .triangle(L,40px,red);

}

8.arguments变量

.border(@1,@2,@3){

  border:@arguments;

}

#wrap .sjx{

  .border(1px,solid,black);

}

less运算

就是加减乘除.

运算符的左右两侧必须有个空格隔开。

两个数参与运算，如果只有一个数有单位，最后结果就以这个单位为准

两个数参与运算，如果两个数都有单位，而且单位不一样，最后结果以第一个数的单位为准。

#wrap .sjx{

  width:(100 + 100px);

}

less继承

继承性能比混合高，灵活性没有混合好。继承不能带参数。

.center{

    position:absolute;

    .....

 }

.inner{//处理的时候会.center,#wrap .inner{}，用.center的规则集

   &:extends(.center);

   &nth-child(1){

        width:100px;

        height:100px;

        background:red;

   }

}

less避免编译

*{

   margin:100 * 10px;

   padding:~"calc(100px + 100px)";//避免编译用~“”括起来，让浏览器自己计算

}

命名空间

#name(){

 background:black;

 .a{

   ....

  }

}

.wrap{

   background:red;

   #name >.a;//这个就是命名空间

}

条件表达式

.mixin(@a) when(lightness(@a)>=50%){

  background-color:black;

}

循环

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

合并属性

1.在需要合并的属性的：前加上+就可以完成合并，合并以，分割属性

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

会被编译成

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

2.以空格分割，在需要合并的属性的：前加上+_完成合并

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

会被编译成

.myclass {
  transform: scale(2) rotate(15deg);
}