less基础用法一

less基础用法

1. 变量

@bgColor : #66ccff;
@width : 500px;

.text {
    width: @width;
    background-color: @bgColor;
}

转义后

.text {
  width: 500px;
  background-color: #66ccff;
}

2. 混合

@bgColor : #66ccff;
@width : 200px;
@height : 200px;

.mix {
   border: 10px solid red;
}

.test {
   width: @width;
   height: @height;
   background-color: red;
   .mix();
}

转义后

.mix {
  border: 10px solid red;
}

.test {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 10px solid red;
}

3. 嵌套

@bgColor : #66ccff;
@width : 200px;
@height : 200px;


.dad {
    width: @width;
    height: @height;
    background-color: red;
    .son {
        background-color: @bgColor;
    }
  	//用&表示嵌套对象
    &>.son {
        height: 50px;
    }
    //嵌套同样可以使用伪类
    &:hover > .son {
        background-color: red;
    }
}

.dad {
  width: 200px;
  height: 200px;
  background-color: red;
}

.dad .son {
  background-color: #66ccff;
}

.dad > .son {
  height: 50px;
}

.dad:hover > .son {
  background-color: red;
}

@嵌套规则

@bgColor : #66ccff;
@width : 200px;
@height : 200px;


.mediaT {
    width: @width;
    height: @height;
    background-color: red;

    @media (min-width: 768px) {
        background-color: @bgColor;

        @media (min-resolution: 192dpi) {
            background-color: aquamarine;
        }
    }

    @media (min-width: 1280px) {
        background-color: beige;
    }
}

转义后

.mediaT {
  width: 200px;
  height: 200px;
  background-color: red;
}

//@规则提前,包裹住了.mediaT
@media (min-width: 768px) {
  .mediaT {
    background-color: #66ccff;
  }
}

@media (min-width: 768px) and (min-resolution: 192dpi) {
  .mediaT {
    background-color: aquamarine;
  }
}

@media (min-width: 1280px) {
  .mediaT {
    background-color: beige;
  }
}

4. 运算

@bgColor : (#66ccff / 2);
//less会对标准单位进行自动换算
@width : 2px+100cm;
//.less中遇到calc()函数,会将函数中的算式计算出来,但clac()函数会被保留
@height : clac(100px - 10px);
//两个无关联单位进行换算, 单位就会失效,计算的结果最终以最左方的单位为基准
@font-size : 19px+1%;

.mediaT {
  width: @width;
  height: @height;
  //颜色属性同样能够进行运算
  background-color: @bgColor;
  color: rgb((11*2), (33*3), (300/2));
  font-size: @font-size
}

转义后

.mediaT {
  width: 3781.52755906px;
  height: clac(90px);
  background-color: #336680;
  color: #166396;
  font-size: 20px;
}