less 相关用法

less

• 基于 nodejs ,先安装 node ，然后 npm 安装 less

less 的嵌套语法

.content {
  width: 200px;
  height: 200px;
  background-color: red;
  .nav {
    color: blue;
    &:hover {
      color: white;
    }
  }
}

/*
等价于【进行编译输出 lessc  xx.less>xx.css 】
.content {
  width: 200px;
  height: 200px;
  background-color: red;
}
.content .nav {
  color: blue;
}
.content .nav:hover {
  color: white;
}
*/

less 变量

@size: 200px;
@bgColor: red;
@fontSize: 16px;

.content {
  width: @size;
  height: @size;
  background-color: @bgColor;
  .nav {
    background-color: lighten(@bgColor, 20%);
    color: blue;
    font-size: @fontSize + 10px;
    &:hover {
      color: white;
    }
  }
}

/*
编译输出结果

.content {
  width: 200px;
  height: 200px;
  background-color: red;
}
.content .nav {
  background-color: #ff6666;
  color: blue;
  font-size: 26px;
}
.content .nav:hover {
  color: white;
}

*/

mixin【主要是代码复用】

.t1 {
  color: red;
}
.t2 {
  font-size: 18px;
  .t1();
}

/*
编译之后的结果

.t1 {
  color: red;
}
.t2 {
  font-size: 18px;
  color: red;
}

*/

extend【 不再是单纯的代码复制，而是可以提取公共样式 】

.t1 {
  color: red;
}
.t2 {
  font-size: 18px;
  &:extend(.t1);
}

/*
解析出来的代码

.t1,
.t2 {
  color: red;
}
.t2 {
  font-size: 18px;
}

*/

循环【利用的是 mixin 的嵌套调用】

/* 项目需求是最大宽度 1200，最大列数 12 列。可用作栅格化布局 */
@maxWidth:1200px;
@maxCol:12;

.row(@num) when (@num>0) {
    .row(@num - 1);
    .col-@{num}{
        width: @maxWidth / @maxCol * @num;
    }
}

.row(@maxCol);

/*
解析出来的效果

.col-1 {
  width: 100px;
}
.col-2 {
  width: 200px;
}
.col-3 {
  width: 300px;
}
.col-4 {
  width: 400px;
}
.col-5 {
  width: 500px;
}
.col-6 {
  width: 600px;
}
.col-7 {
  width: 700px;
}
.col-8 {
  width: 800px;
}
.col-9 {
  width: 900px;
}
.col-10 {
  width: 1000px;
}
.col-11 {
  width: 1100px;
}
.col-12 {
  width: 1200px;
}

*/

• 基于 Less 的样式工具库 【est】

• http://ecomfe.github.io/est/