1.Less是一门CSS预处理语言,扩展CSS,增加变量、Mixin、函数等特性。
可运行于Node或浏览器端。
2. 安装:
$npm install -g less
3. 命令行用法:
1)$lessc styles.less
2)将css结果存在一个文件中:$lessc styles.less style.css
3)压缩版:$ lessc --clean-css styles.less styles.min.css
4)代码使用:
通过node调用:
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, output) {
console.log(output.css);
});
输出:
.class { width: 2; }
注意:一定保证npm的配置在父级文件夹中存在,否则会报错。
4. 浏览器端用法:
通过link,rel引入styles.less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
下载less.js,并通过script引入
<script src="less.js" type="text/javascript"></script>
注意:让stylesheets在script之前
语法:
1.定义一个变量:@border-color:#CCCCCC;
.class{
border:1 px solid @border-color;
}
==>css
.class{
border: 1px solid #CCCCCC;
}
注意:也有生命周期,所以分为全局变量与费全局变量。
Mixins:多重集成的实现。允许将一个类嵌入到另外一个类中使用,被嵌入的类也可以称作变量,简单的讲,Mixins 其实是规则级别的复用。
// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
Parametric Mixins(混入参数)
// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}
运算及函数
1. 可以进行加减乘除运算。@transition: @init*2;
代码可参考:https://github.com/YZlingyu/teambition/blob/master/css/index.less