less基础

语法

定义变量

body {
  padding:0;
  margin:0;
}

@color:blue;   //定义一个color变量
@size:3px;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

.box {
  width: 500px;
  height: 300px;
  border:1px solid blue;
  .one {
    height: @size * 50 ;   //使用变量 50*3 = 150
    color:red;
    border: @size solid red;  //3px solid blue
  }
}

编译之后

body {
  padding: 0;
  margin: 0;
}
.box {
  width: 500px;
  height: 300px;
  border: 1px solid blue;
}
.box .one {
  height: 150px;
  color: red;
  border: 3px solid red;
}

伪类

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }

}

编译之后

.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

局部变量

@clr:red;

.box {
  @clr:blue;
  color:@clr;
}

.one {
  background-color: @clr;
}

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

编译之后

.box {
  color: blue;
}
.one {
  background-color: red;
}

运算

@base: 2cm * 3mm; // result is 6cm

@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

// 数字会转换为相同的单位
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// 单位转换
@incompatible-units: 2 + 5px - 3cm; // result is 4px

引入文件

@import "library"; // library.less
@import "typo.css";

继承

### &写法

@base: #f04615;
@width: 0.5;

.box {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

.one {
  &:extend(.box);
  color:red;
}

编译

.box , .one {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}
.one {
  color: red;
}

：写法

.box {
  color:blue;
  font-size: 22px;
}

.one:extend(.box) {
  background-color: pink;
}

编译

.box , .one {
  color: blue;
  font-size: 22px;
}
.one {
  background-color: pink;
}