less入门笔记

一、嵌套

1、在一个选择器中嵌套另一个选择器来表现元素之间的层级关系。
如，在less文件中写：

.left{
  float:left;
  .padding_left{
    padding-left:20px;
  }
}

得到对应的css代码：

.left{
  float:left;
}
.left .padding_left{
  padding-left:20px;
}

2、&的用法
核心：&符号代表嵌套的外层元素本身。
例1 鼠标悬停:hover样式在less中的使用
原来的写法：

a{
  color:#fff;
}
a:hover{
  color:green;
}

采用&嵌套的写法

a{
  color:#fff;
  &:hover{
    color:green;
  }
}

例2 给.left元素本身添加.padding_left样式
错误写法：

.left{
  float:left;
  .padding_left{
    padding-left:20px;/*该样式作用于.left元素中类别为.padding_left的子元素*/
  }
}

正确写法：

.left{
  float:left;
  &.padding_left{
    padding-left:20px;/*该样式作用于.left元素自身*/
  }
}

二、变量

变量允许我们单独定义一系列通用样式，然后在需要的时候去调用。
1、基本用法
设定三个变量分别为：@width @borderStyle @color
在less文件中写：

@width:2px;
@style:solid;
@color:red;

.box{
width:300px;
height:100px;
border:@width @style @color;
}

编译成.css文件后

.box{
width:300px;
height:100px;
border:2px solid red;
}

2、变量的作用域
①花括号中的变量作用域为当前的花括号
②相互嵌套的花括号中，内部花括号中可以使用外部花括号中定义的变量。而外部花括号不能使用内部花括号中定义的变量。

三、混合

1、普通混合
将一个定义好的classA引入到另一个classB中，从而简单实现classB继承classA中的所有属性。
举例说明：
less文件中

.classA{
  classA的样式；
}
.classB{
   .classA;/*这样classB即可继承classA中设置的样式*/
   classB中的其他样式；
}

2、带参数混合（参数设置默认值）；
这里的参数是指变量。
less文件：

.border(@width,@color){
border:@width solid @color;
}

.box1{
   .border(1px,green);
}
.box2{
  .border(2px,pink);
}

3、带默认值的参数混合

.border(@width:1px,@style:solid){
   border:@width @style yellow;
}
.box1{
   .border();/*采用默认值1px solid yellow*/
}
.box2{
   .border(2px);/*边框宽度采用设定值，样式为border:2px solid yellow;*/
}
.box3{
    .border(3px,dotted);/*当有多个默认值时，改变后面的默认值时需要从第一个开始设定值*/
}

4、@arguments变量,用来代替多个变量名

.border(@width:1px,@style:solid){
  border:@arguments green;
}
.box1{
    .border();/*border:1px solid green;*/
}
.box2{
   .border(dotted,1px);/*border:dotted 1px green;*/
}
.box3{
   .border(dotted);/*border:dotted solid green;*/
}

5、模式匹配

.border(top,@width:1px){
border-top:@width solid green;
}
.border(right,@width:1px){
border-right:@width solid blue;
}
.border(bottom,@width:1px){
border-bottom:@width solid pink;
}
.border(left,@width:1px){
border-left:@width solid orange;
}
.border(@_,@width:1px){
/*用于写以上四种模式的公共样式*/
width:100px;
}

.box1{
  .border(top,5px);/*border-top:5px solid green;width:100px;*/
}
.box2{
  .border(right);/*border-right:1px solid pink;width:100px;*/
}

四、Math函数

1、round()
作用：四舍五入
例如：

width:round(5.5)*1px;

2、ceil()
作用：向上取整
3、floor()
作用：向下取整

五、命名空间

应用场景：主题风格切换。

.blue{
   .button{
    background:blue;
    }
}
.red{
   .button{
    background:red;
    }
}
.box{
   .red  .button;/*后面可以通过修改.red实现背景颜色切换*/
}

六、注释

//单行注释，这种注释方法不会被编译到css文件中（通常用于生产环节）
/*多行注释，这种注释方法会被解析到CSS文件里面去*/

七、@import

作用：在B.less文件中引入A.less文件。
例如：

@import "A.less"

此时，在B.less中可以直接使用A.less中定义的变量。

八、避免编译（将运算符号等做转义处理）

less文件中

@rem:32rem;
.box{
width:@rem;
font:(12/@rem)/(20/@rem) '宋体';
}

对应的css文件中将生成：

.box{
width:32rem;
font:(12/32rem)/(20/32rem) '宋体';
}

显然，这不是我们想要的结果。

正确的方式如下：
在less文件中，将运算符用' '包起来，并在前面加上~。

@rem:32rem;
.box{
width:@rem;
font:(12/@rem)~'/'(20/@rem) '宋体';
}

.css文件中

.box{
width:32rem;
font:0.375rem/0.625rem '宋体';