{less}概览
less
less是一门CSS预处理语言,它扩充了CSS语言,增加了诸如变量、混合(mixin)、函数等功能,降低了CSS的维护成本。
应用方式
less可以直接在客户端使用,也可以在服务器端。这里使用node.js的包管理工具npm安装在服务器端使用。
$ npm install -g less
安装好后调用以下命令调用less编译器并输出到指定的文件:
$ lessc xxx.less > xxx.css
相关HTML文件把xxx.css链入即可使用>.<
如果报错:'lessc' is not recognized as an internal or external command, operable program or batch file.
可能是未全局安装,或未设置环境变量。我遇到这个错误了>.<相关解决方法地址。
也可在代码中调用less编译器(Node平台)。
var less = require("less");
less.render(".calss {width: (1 + 1)}", function(error, css) {
console.log(css);
});
//手动调用分析器(paser)和编译器:
var parser = new(less.Parser);
parser.parse(".class {width: (1 + 1)}", function(error, tree) {
if(error) {
return console.log(error);
}
console.log(tree.toCSS());
});
//可以给编译器传递多个参数
var parser = new(less.Parser)({
paths: [".", "./lib"], //为@import指令指定查找路径
filename: "style.less" // 指定文件名,更好的处理错误信息
});
parser.parse(".class {width: (1 + 1)}", function(error, tree) {
tree.toCSS({
//压缩CSS输出代码量
compress: true
});
});
语言特性概览
- 变量:
@name: value;
@nice-blue: #5b83ad;
.header {
color: @nice-blue;
}
//编译后
.header {
color: #5b83ad;
}
- 混合(mixin): 可以把含有一堆属性的规则加到另一组规则中,这样我们就可以在这组规则中用那一堆属性了。
.divBorder {
border-top: solid 1px black;
border-bottom: dotted 1px black;
}
//只用把`.divBorder;`写入即可。
#menu {
color: @nice-blue;
.divBorder;
}
- 嵌套规则: 比起分开更能直观体现HTML的结构也更简单。
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
//嵌套后
#header {
color: black;
.navigation {
font-size: 12px;
}
}
//伪类选择器也可以使用嵌套,`&`表示当前选项的父选择器
//此处&既是指#alink
#alink {
text-decoration: none;
&:hover {
cursor: pointer;
}
}
- 运算: 任何数字、颜色或变量都可以参与运算。运算结果中的单位为在该次运算中出现过的单位。
@base: 5%;
@another: @base * 2;
color: #888/4;
@var: 1px + 5; // 6px
- 函数: less有内置的函数,用于转换颜色、处理字符串、算数运算等。
@num: 0.5;
.class {
width: percentage(@num);
}
- 命名空间&存取: 有时为了组织性目的或为了提供封装,可能需要把变量和混合分组。在less中可以非常直观的做这件事。
#bundle {
.button {
display: block;
border: 1px solid black;
&:hover {
cursor: pointer;
}
}
.other {...}
}
//在`#header a`中用混入`#bundle`的`.button`
#header a {
text-decoration: none;
#bundle > .button;
}
- 作用域: less中的作用域和编程语言很像,编译器会从最里层开始一层一层往上找诸如变量和混合。
@var: red;
#page {
@var: white;
#header {
color: @var; //white
}
}
#box {
#boxHead {
color: @var; //white
}
@var: white;
}
-
注释:
/*块级注释*/
和//行注释
-
导入(import): 导入
.less
文件,则此文件中的全部变量都可以使用了。@import "library.less"
。
.