Less CSS 是一个使用广泛的 CSS 预处理器,对 CSS 进行扩展,减少很多 CSS 的代码量。
less运用起来非常的简单方便,相信没学过的人阅读完后就懂了,主要是以下几点:
一、变量
style.less写法:
//定义变量:@
@nice-blue: #5B83AD;
#header {
color: @nice-blue;//使用变量
}
编译后style.css:
#header {
color: #5B83AD;
}
二、计算
style.less写法:
#jisuan{
width:(100/24rem);
height:(200/24rem);
}
编译后style.css:
#jisuan{
width: 4.16666667rem;
height: 4.16666667rem;
}
三、混合
style.less写法:
//类borderred中的样式设置放到另一个类中;
.bordered{
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a{
color: red;
.bordered;
}
编译后style.css:
.post a{
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
四、嵌套
style.less写法:
#header {
color: black;
.navigation {font-size: 12px;}
.logo {width: 300px;}
}
编译后style.css:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
五、转义
style.less写法:
//使用“~” 进行转义,转义可以把任意字符串转为属性或可变值
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译后style.css:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
六、资源分享
官网:lesscss.org
在线LESS编译:http://tool.oschina.net/less