less 实战

less 实战

安装

npm install -g less
lessc styles.less styles.css 

编译

lessc style.less style.css

$ lessc style.less style.css --clean-css="advanced"

方法使用

嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

.clearfix {
  display: block;
  zoom: 1;

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

运算

@other: @base + @filler; // result is 15%

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

导入

@import "typo.css";

函数

// 定义方法- 传入参数@index
.color-list (@index:1) {
	@list:#b8efb1,#50b543,#fda496,#ea3f2d;
	background-color: extract(@list,@index)
}
.color01 span{ .color-list(1) }
.color02 span{ .color-list(2) }
.color03 span{ .color-list(3) }
.color04 span{ .color-list(4) }