@media: mobile; .mixin (@a) when (@media = mobile) { ... } .mixin (@a) when (@media = desktop) { ... } .max (@a, @b) when (@a > @b) { width: @a } .max (@a, @b) when (@a < @b) { width: @b }
最后，如果想基于值的类型进行匹配，我们就可以使用is*函式:
.mixin (@a, @b: 0) when (isnumber(@b)) { ... } .mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常见的检测函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：
ispixel
ispercentage
isem
最后再补充一点，在导引序列中可以使用and关键字实现与条件：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
使用not关键字实现或条件
.mixin (@b) when not (@b > 0) { ... }
嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; }
在 LESS 中, 我们就可以这样写:
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } }
或者这样写:
#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } }
代码更简洁了，而且感觉跟 DOM 结构格式有点像. 注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到 & 了. 这点对伪类尤其有用如 :hover 和 :focus 例如:
.bordered { &.float { float: left; } .top { margin: 5px; } }
会输出
.bordered.float { float: left; } .bordered .top { margin: 5px; }
运算
任何数字、颜色或者变量都可以参与运算. 来看一组例子:
@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;
LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话:
@var: 1px + 5;
LESS 会输出 6px 括号也同样允许使用:
width: (@var + 5) * 2;
并且可以在复合属性中进行运算:
border: (@width * 2) solid black
命名空间
有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这 样在 #bundle 中定义一些属性集之后可以重复使用:
#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } }
你只需要在 #header a 中像这样引入 .button :
#header a { color: orange; #bundle > .button; }
字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中，像 @{name} 这样的结构:
@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");