LESS语法.docx

LESS 语法LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！变量很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:#header { color: #6c94be; }甚至可以用变量名定义为变量:@fnord: I am fnord.;@var: fnord;content: @@var;解析后:content: I am fnord.;请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次.混合在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class:.bordered {border-top: dotted 1px black;border-bottom: solid 2px black;}那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:#menua {color: #111;.bordered;}.posta {color: red;.bordered;}.bordered?class里面的属性样式都会在?#menu a?和?.post a中体现出来:#menua {color: #111;border-top: dotted 1px black;border-bottom: solid 2px black;}.posta {color: red;border-top: dotted 1px black;border-bottom: solid 2px black;}任何 CSS?class,?id?或者?元素?属性集都可以以同样的方式引入.带参数混合在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:.border-radius (@radius) {border-radius: @radius;-moz-border-radius: @radius;-webkit-border-radius: @radius;}然后在其他class中像这样调用它:#header {.border-radius(4px);}.button {.border-radius(6px); }我们还可以像这样给参数设置默认值:.border-radius (@radius: 5px) {border-radius: @radius;-moz-border-radius: @radius;-webkit-border-radius: @radius;}所以现在如果我们像这样调用它的话:#header {.border-radius; }radius的值就会是5px.你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:.wrap () {text-wrap: wrap;white-space: pre-wrap;white-space: -moz-pre-wrap;word-wrap: break-word;}pre { .wrap }输出:pre {text-wrap: wrap;white-space: pre-wrap;white-space: -moz-pre-wrap;word-wrap: break-word;}@arguments?变量@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {box-shadow: @arguments;-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments;}.box-shadow(2px, 5px);将会输出:box-shadow: 2px5px1px#000;-moz-box-shadow: 2px5px1px#000;-webkit-box-shadow: 2px5px1px#000;模式匹配和导引表达式有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：.mixin (@s, @color) { ... }.class {.mixin(@switch, #888);}如果想让.mixin根据不同的@switch值而表现各异，如下这般设置：.mixin (dar