七、模式匹配与Guard表达式
根据传入参数的不同，引入不同的属性集。
1 .mixin (dark, @color) { 2 color: darken(@color, 10%); 3 } 4 .mixin (light, @color) { 5 color: lighten(@color, 10%); 6 } 7 .mixin (@_, @color) { 8 display: block; 9 } 10 11 .class1 { 12 .mixin(light, #888); 13 } 14 .class2{ 15 .mixin(dark,#888); 16 }
编译后的结果：
1 .class1 { 2 color: #a2a2a2; 3 display: block; 4 } 5 .class2 { 6 color: #6f6f6f; 7 display: block; 8 }
八、Guards
有条件的混合，关键词when引入了guard条件，如果符合条件则引入该属性集，规则类似媒体查询。
1 .mixin (@a) when (lightness(@a) >= 50%) { 2 background-color: black; 3 } 4 .mixin (@a) when (lightness(@a) < 50%) { 5 background-color: white; 6 } 7 .mixin (@a) { 8 color: @a; 9 } 10 11 .class1{ 12 .mixin(#999999); 13 } 14 .class2{ 15 .mixin(#333333); 16 }
编译后的结果：
1 .class1 { 2 background-color: black; 3 color: #999999; 4 } 5 .class2 { 6 background-color: white; 7 color: #333333; 8 }
注意点：
1、.mixin (@a)
when (@a > 10),
(@a < -10) { ... }
多个guard用逗号分隔，只要其中一个满足条件则为true
2、.mixin (@a) when (isnumber(@a)) and (@a >
0) { ... } and在 guard 中加入额外的条件，都满足才为true
3、.mixin (@b) when not (@b > 0) { ... } 在when 前面加上not 是否定了when条件，即条件不满足才为true
九、嵌套规则
#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } }
嵌套规则在Less中比较常用，很多人认为它结构清晰。（我表示看着挺乱的啊= =到底是哪里有问题）
编译后的结果：
1 #header { 2 color: black; 3 } 4 #header .navigation { 5 font-size: 12px; 6 } 7 #header .logo { 8 width: 300px; 9 } 10 #header .logo:hover { 11 text-decoration: none; 12 }
注意点：这里的&指它的父级选择器.logo
，&的高级用法，用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。如：
1 .child, .sibling { 2 .parent & { 3 color: black; 4 } 5 & + & { 6 color: red; 7 } 8 }
这里的&指.child, .sibling，所以编译后的结果为：
1 .parent .child, 2 .parent .sibling { 3 color: black; 4 } 5 .child + .child, 6 .child + .sibling, 7 .sibling + .child, 8 .sibling + .sibling { 9 color: red; 10 }
十、命名空间
1 #bundle { 2 .button () { 3 display: block; 4 border: 1px solid black; 5 background-color: grey; 6 &:hover { background-color: white } 7 } 8 } 9 10 #header a { 11 color: orange; 12 #bundle > .button; 13 } 14 15 .box{ 16 .hd(){ 17 width:100%; 18 height:22px; 19 line-height:22px; 20 } 21 } 22 23 .footer{ 24 h3{ 25 .box >.hd; 26 } 27 }
编译后的结果：
1 #header a { 2 color: orange; 3 display: block; 4 border: 1px solid black; 5 background-color: grey; 6 } 7 #header a:hover { 8 background-color: #ffffff; 9 } 10 .footer h3 { 11 width: 100%; 12 height: 22px; 13 line-height: 22px; 14 }
十一、字符串插值和选择器插值
变量可以用像 @{name} 这样的结构，以类似 ruby 和 php
的方式嵌入到字符串中：
@base-url: "http://assets.fnord.com"; .bg{ background-image: url("@{base-url}/images/bg.png"); }
编译后的结果：
.bg { background-image: url("http://assets.fnord.com/images/bg.png"); }
如果需要在选择器中使用 LESS
变量，只需通过使用和字符串插件一样的 @{selector} 即可
@name: blocked; .@{name} { color: black; }
编译后的结果为：
.blocked { color: black; }
十二、避免编译
有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。
要输出这样的值我们可以在字符串前加上一个 ~，例如：
.class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; }
编译后的结果为：
1 .class { 2 filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); 3 }
原文：http://www.cnblogs.com/qianlegeqian/p/3596164.html