less的学习

less是一门CSS预处理语言，在less中，也拥有变量这个概念

//在less中使用变量
@color:pink;
@color-hover:darken(@color,20%);

a{
  background-color: @color;
}
a:hover{
  background-color: @color-hover;
}
/*-------华丽分割线——------*/
//在选择器中使用less变量
@select:header;//DIV的ID为header
#@{select}{
    background-color:#f00;
}
/*-----------分割--------*/
//在属性名中使用less变量
@property:color;
.left{
    @{property}:pink;
}

** 这里的变量都是延迟加载的，使用之前可以不用声明，也就是说，在当我们定义一个变量两次之后，会使用最后一次的定义

//也就是说，我们不必把声明语句放在前头
.left{
    width:@dis
}
@dis:200px;
//定义多次
@var:0;
@var:3;

---

Extend伪类，是一个将他放置的选择器和他所引用的选择器进行合并的一个伪类；
也就是说

.left{  
    //&号表示的是上一层选择器，也就是.left
  &:extend(.right);
  background-color: red;
}
.right{
    color:blue;
}
//这个解析为，是在left中加入了color:blue;这个属性
.left,.right{
    color:blue;
}
.left{
    background-color:red;
}
//当我们想要包含多个类的时候，只要使用逗号隔开(.left,.right)

这个时候.left就解析为

在这里 我们可以在.right后面加上一个all关键字，表示使用选择器匹配到所有的声明，也就是.right下的所有声明

---

嵌套

在less中，我们可以像在js中写函数一样，可以嵌套着写，类似

.left{
    color:blue;
    p{
        color:red;
    }
}

当我们使用媒体查询的时候，我们会发现我们要把每个元素都分开写，less对此也进行了嵌套优化

//正常的应该这么写
.left{
  width: 400px;
}
@media screen and(max-width: 768px){
    .left{
      width: 100px;
    }
}
//使用less嵌套
.left{
  @media screen and(max-width:768px){
    width: 100px;
  }
  width: 400px;
  //不同屏幕尺寸下的媒体查询
  @media screen and(max-width:375px){
    width: 50px;
  }
}
//解析后的css代码
.left{
    width:400px;
}
@media screen and(max-width:768px){
.left{
    width:100px;
    }
}
@media screen and(max-width:375px){
.left{
    width:50px;
    }
}

---

混合方法

无参数方法

.setBorder(){
  border: solid 1px green;
  width: 100px;
  height: 100px;
  color: #f00;
}
.right{
  .setBorder();
}

包含参数方法

//less中的方法类似JS，less拥有内置的arguments，用@arguments来表示，参数列表要使用@来声明，若我们要传入不定数量，我们可以通过写入ES6的扩展运算符"..."来实现
.setMargin(@a,@b){
  border: solid 1px green;
  margin: @arguments;//也可以是margin:@a @b;
}
.left{
  .setMargin(10px,20px);
}
//在方法中嵌套方法
#setArea(){
  background-color: pink;
  .area(@w:300px,@h:300px) {
    width: @w;
    height: @h;
  }
}
//调用
.left{
  #setArea > .area(100px,100px);
}
.right{
  #setArea();
}
//不定参数
#setShadow(...){
  box-shadow: @arguments;
}
.left{
  #setShadow(3px,3px,4px,#888888);
}

方法的条件筛选

在less中，没有if，但是他有when；

//when后的"not"表示"!","and"表示"&&",","表示"||"
#color(){
  .border(@style,@color,@width) when(@width<10px)and(@color=#f00){
    border: @style @width @color;
  }
  .font(@size)when not(@size>20px){
    font-size: @size;
  }
}
.left{
  #color >.border(solid,#f00,2px);
  #color >.font(12px);
}

less没有for循环这个说法，官网使用的则是递归来实现生成多个

.right{
  .column(4);
}
.column(@n,@i:1)when(@i<=@n){
  .column-@{i}{
    width:(@i*100%/@n);
  }
  .column(@n,(@i+1));
}
//通过这种方式，我们就生成了多个column-n的类
.column-1{
    width:25%;
}
.column-2{
    width:50%;
}
.column-3{
    width:75%;
}
.column-4{
    width:100%;
}

先鸽为敬