Less

/*编译到css的注释*/
//不会编译到css的注释

@color:white;
@margin:margin;
@titleId:#title;

@{titleId}{
  color:@color;
  @{margin}:0;
}

@import './common.less'	//引用
  
.center(@width:10px, @height:10px){		//设置参数及默认值
  width:@width;
  height:@height;
}

.title{
  .center(100px);
}
.content{
  .center(@height:200px);	//指定@height参数
}

.border(@a, @b, @c){
  border:@arguments; 	//混合里所有的参数
}

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

@switch: light;

.class {
  .mixin(@switch; #888);
}

.clearfix {
  display: block;
  zoom: 1;

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

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

@base: 2cm * 3mm; // 结果是 6cm

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

.center(){		
  
}

.title:extend(.center){
  
}
.content{
  &:extend(.center)
}