参考来源:http://www.bootcss.com/p/lesscss/
less简介
less是一种 动态 样式 语言。
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
less引入
方法一
在头部通过link引入
<link rel="stylesheet/less" type="text/css" href="styles.less" />
下载less.js然后在less之后引入less.js
<script src="less.min.js" type="text/javascript"></script>
注:本地运行的话,由于chrome的安全策略,会导致无法解析
rel="stylesheet/less"
,从而导致加载失败。firefox和IE没有此限制。
方法二
安装less
npm install -g less
写好.less文件后,使用以下代码将less文件编译为css文件
lessc styles.less > styles.css
less兼容性
如果采用less.js引入的话,据官网宣称,less支持IE6+。但实测中,less(v2.2.0)由于使用了function.bind的方法,导致less.js只能在IE9+才能正常使用。hack方法
使用npm安装less的话,由于和less并没有直接关系,只是将less转换为css,因此兼容所有浏览器(当然,要是使用了一下不兼容的属性,例如border-radius
之类的,就不属于less的锅了)
less语法
变量
在实际项目中经常得整个公司保持某种风格,例如阿里的是橙色主色调。所以很多按钮背景色、块背景色、字体颜色等等都会用同一种橙色。但是,如果以后公司需要更换主色调,那么一个个改颜色将会累死人。而如果我们将这个颜色设定为全局变量,那么只需要改一次就够了。
less的变量用@开头,key后面又冒号,例如:
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
函数 & 运算
less支持简单计算,并提供了一些计算函数
@color: #111;
#header {
color: @color * 2; // #222
}
h2 {
color: lighten(@color, 50%); // #c3c3c3
}
混合
我们可以将一个写好的选择器的样式写入另一个选择器中,达到继承的目的。
@color: #111;
@size: 12px;
#header {
color: @color * 2; // #222
}
h2 {
#header;
font-size: @size;
}
编译的结果为:
#header {
color: #222;
}
h2 {
color: #222;
font-size: 12px;
}
自定义函数/默认参数
每个选择器都可以作为函数名,后面的参数可以设定默认值,如果实参为空时则使用默认值。
@base: #444;
.base (@light : 0) {
color: lighten(@base, @light);
}
h1 {
color: @base;
}
h2 {
.base (10%);
}
h3 {
.base (50%);
}
编译结果为:
h1 {
color: #444444;
}
h2 {
color: #5e5e5e;
}
h3 {
color: #c3c3c3;
}
嵌套
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
编译结果:
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
监视模式
注:表示本人没开启成功过,至今不清楚原因。如果有人知道请不吝赐教。
监视模式是客户端的一个功能,这个功能允许你当你改变样式的时候,客户端将自动刷新。
要使用它,只要在URL后面加上’#!watch’,然后刷新页面就可以了。另外,你也可以通过在终端运行less.watch()来启动监视模式。