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的功能还是很强大的哈，减少了代码量，逻辑上也更严密~ 可以试着用一用！