1、为什么使用Less
每一门技术的出现都是为了解决现存的问题,同样的,Less 的出现是为了解决 CSS 中过于呆板的写法,LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数.。Less 是一门 CSS 预处理语言,总结一下为:Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解,那么就可以很快的掌握并在你的项目中使用 Less。Less 可以运行在 Node 或浏览器端。
2、安装使用
使用 Npm 全局安装 Less
$ npm install less -g
方式一:
引入less.js
前先要把你的样式文件引入 :
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
注意你的less样式文件一定要在引入less.js前先引入。
备注:此方式请在服务器环境下使用!本地直接打开可能会报错!
监视模式:
监视模式是客户端的一个功能,这个功能允许你当你改变样式的时候,客户端将自动刷新。
要使用它,只要在URL后面加上'#!watch
',然后刷新页面就可以了。另外,你也可以通过在终端运行less.watch()
来启动监视模式。
方式二:
你可以在终端调用 LESS 解析器:
$ lessc styles.less
上面的命令会将编译后的 CSS 传递给 stdout
, 你可以将它保存到一个文件中:
$ lessc styles.less > styles.css
如何你想将编译后的 CSS 压缩掉,那么加一个 -x
参数就可以了.然后在页面引入css即可。
3、使用语法
1、变量
@ 符号定义变量,使用 @ 符号获取变量。
@blue:blue;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111; //#6C94BE
.main {
background-color: @blue; //属性使用变量
color: @light-blue;
}
请注意 LESS 中的变量为完全的 ‘常量’ ,所以只能定义一次。
2、混合
在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。混合也是减少代码书写量的一个方法。
-
普通混合;
-
带参数的混合;
-
带参数并且有默认值的混合;
-
带多个参数的混合;
a、普通混合
混合的类名在定义的时候加上小括弧 ()
,那么在转译成 css 文件时就不会出现;
//.bordered { //定义一个通用属性的class, 在编译出的css文件不会出现该类
// border-top: darkblue 1px dotted;
// border-bottom: green 2px solid;
//}
.bordered() { //定义一个通用属性的class, 带有(),在编译出的css文件不会出现该类
border-top: darkblue 1px dotted;
border-bottom: green 2px solid;
}
.main {
color: yellow;
.bordered; //调用上面定义的通用属性集class
}
.content{
.bordered; //调用上面定义的通用属性集class
}
b、带参混合
如果不是按照顺序传值,那就将所传值的属性名标注上;
.div-width (@varW) { //带参数的混合
width: @varW;
}
.div-height (@varH:100px) { //带默认参数值的混合
height: @varH;
}
.p-style (@h, @w, @c){
width: @w;
height: @h;
color: @c;
}
.div1{
.div-width(50px);
.div-height(200px);
}
.div2{
.div-width(60px);
.div-height; //使用到它的默认参数
}
p{
.p-style(@w: 300px, @h: 100px, @c: pink); //不按顺序传值,就将参数名都标上
}
3、匹配模式
规则较多,详情可参考官网说明:http://www.bootcss.com/p/lesscss/#guide
@media: mobile;
.bc(@a) when (@media = mobile) { //导引中可用的全部比较运算有: > >= = =< <
background-color: @a;
}
.color(@b) when (iscolor(@b)) { //使用is*函数
color: @b;
}
p{
.bc(red);
.color(#00ff00);
}
4、。。。