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;}