less学习总结
今天看某厂的DPL,发现有用less写的样式文件,有些语法没太看懂。于是搜了下别人写的less总结,发现这篇写得很不错:
http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
我自己也大概总结了下:
1、相较于css,less写出的样式文件更简洁。因为它可以把相同的value(margin像素值、字体颜色值、背景颜色值、边框属性等)提取成变量,使用时引用变量即可。这种方式在value值改变时,也更易用,因为不需要一处一处地去修改使用同一value的地方,只要改变变量的赋值就行了。
例子:(摘自上文中提到的总结)
@border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }
这里就把所有表格的边框颜色值提取成变量了,取名为border-color,用@标识其是一个变量。经过编译后的less文件是这样的:
.mythemes tableBorder { border: 1px solid #b5bcc7; }
很显然,只要改变border-color的值,任何引用它的地方就都跟着变了,比css方便多了~
2、less变量的作用域和一般的编程语言(c、java)类似。
例子:
@width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px }
变量取值的选取顺序可以在上面代码的注释中看到。
编译后生成如下的css:
#homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; }
3、混入(Mixins)
我个人理解的Mixins是把上面提到的变量的范围扩大了,扩大成一个Class,从而使Class中定义的多个属性在多个地方复用。而且Mixins强大的地方还在于它有类似入参的功能。如果引用时没有另外给入参赋值,用的就是定义Mixins的默认入参值。
例子:
// 定义一个样式选择器 .roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的样式选择器中使用 #header { .roundedCorners; } #footer { .roundedCorners(10px); }
编译生成的css:
#header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
4、&的用法。
a { color: red; text-decoration: none; &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素 color: black; text-decoration: underline; } }
编译后css:
a { color: red; text-decoration: none; } a:hover { color: black; text-decoration: underline; }
如果没有&,那就是类似于嵌套了,表示的是后代的属性~
5、less变量的value值还能计算
这个特性也让我蛮意外的。
例子:
@init: #111111; @transition: @init*2; .switchColor { color: @transition; }
编译后:
.switchColor { color: #222222; }
LESS的功能还是很强大的哈,减少了代码量,逻辑上也更严密~ 可以试着用一用!