标签：
什么是 LESS
LESS是一种动态样式语言，属于 CSS 预处理语言的一种。它使用类似 CSS 的语法，但是 赋予了动态语言的特性,比如变量、继承、运算、函数等，方便 CSS 的编写和维护。
使用 LESS
在开发环境下的时候，推荐直接使用浏览器使用 LESS。
开发完毕后,推荐使用 node.js 进行预编译，将 .less 编译成 .css
npm install -g less
lessc style.less > style.css
以下是自己尝试的玩意.
.less 文件
@red:red; // 设置变量
@blue:blue; // 变量放顶部,以后调整的时候直接调整变量
@size:22px;
@darkblue:darken(@blue,10%); // 执行函数,返回加深后的颜色
@url:"http://static.cnblogs.com/images/adminlogo.gif";
@name:active;
#div{
h3{ // 嵌套
@size:32px;
color:@red; // 调用变量
font-size:@size;
&.@{name} { // 选择器插值
font-size:@size+10;
background:url("@{url}") no-repeat; // 字符串插值
}
}
h4 {
color:@blue;
font-size:@size+10; // 运算
&:hover { // 调用变量
.h4-hover(#333); // 调用属性集合 将参数传进去
}
&:before{
@var: ~`"hello".toUpperCase() + ‘,‘`;
content:"@{var}";
}
}
}
.h4-hover(@color){ // 属性集合,可接受一个参数
border:1px solid @color;
color:@darkblue;
}
/* 当 .less 文件被编译成 .css 的时候这条注释还在 */
// 当 .less 文件被编译成 .css 的时候这条注释不见了
编译后的 css
#div h3 {
color: red;
font-size: 32px;
}
#div h3.active {
font-size: 42px;
background: url("http://static.cnblogs.com/images/adminlogo.gif") no-repeat;
}
#div h4 {
color: blue;
font-size: 32px;
}
#div h4:hover {
border: 1px solid #333;
color: #0000cc;
}
#div h4:before {
content: "HELLO,";
}
/* 当 .less 文件被编译成 .css 的时候这条注释还在 */
标签：
原文地址：http://www.cnblogs.com/linjilei/p/5183568.html
