Less的使用

从http://winless.org/下载winless安装。

 

使用自己喜欢的编译器生成如下两个文件_main.less和test.less。

_min.less

@import “test.less”;

test.less

h1 {font-family: sans-serif;}

h2, p {color:gray;}

//变量定义
@off-white: #e5e5e5;
@brand-primary: #890000;

//使用变量
a {
    color: @brand-primary;
}

//嵌套
.navbar-nav {
    background: @brand-primary;
    > li > a {
            color: @off-white;
        }
}

//混入
.box-sizing(@boxmodel) {
    -webkit-box-sizing: @boxmodel;
       -moz-box-sizing: @boxmodel;
            box-sizing: @boxmodel;
}

.box {
    .box-sizing(boder-box);
}

.another-elment {
    .box-sizing(boder-box);
}

// 运算
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}

 

使用winless编译_main.less

 

生成的_main.css文件内容如下 ：

h1 {
  font-family: sans-serif;
}
h2,
p {
  color: gray;
}
a {
  color: #890000;
}
.navbar-nav {
  background: #890000;
}
.navbar-nav > li > a {
  color: #e5e5e5;
}
.box {
  -webkit-box-sizing: boder-box;
  -moz-box-sizing: boder-box;
  box-sizing: boder-box;
}
.another-elment {
  -webkit-box-sizing: boder-box;
  -moz-box-sizing: boder-box;
  box-sizing: boder-box;
}
.switchColor {
  color: #222222;
}