less 使用

1.安装 lazy Less自动编译插件

2.创建  .less 文件

3.定义变量

//定义变量
@baseColor: #ff6700;
@parentWidth: 100px;
@bgcColor: #cccc;

div {
 width: @parentWidth;

 p {
  background-color: @bgcColor;
  //计算
  width: @parentWidth - 50;
  .active;

 }

 //嵌套 h2 是 div 的子元素
 h2 {
  color: @baseColor;
  //混入 类
  .active
 }
}

//混入 class 类
.active {
 border: 1px solid #666666;
}

html  和效果