Lesson-30 less

• 在 less 中 @ 表示变量
• . 代表函数 或者叫做混合

.rounded-corners (@radius: 5px) {
   border-radius: @radius;
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
}
#header {
   .rounded-corners;
} 
#footer {
   .rounded-corners(10px);
} 

• 嵌套表示继承
• &: 可以表示状态

a { text-decoration: none;
     &:hover { border-width: 1px }
   }

• 上面说的函数只是简单的一种 还可以映射到js函数
• 混合还可以使用模式匹配来实现多可同名函数 等等
• 引导 是通过 一个判断语句来 决定调用那些函数
• 可以使用内置函数

下面就是常见的检测函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：
ispixel
ispercentage
isem

• 在引导的 when 中可以使用 and 和 not
• less 提供的 颜色函数

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency
spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);    // return a mix of @color1 and @color2

• 数学函数

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`

• 可以封装方法 像下面这样调用

#bundle {
 .button () {
   display: block;
   border: 1px solid black;
   background-color: grey;
   &:hover { background-color: white }
 }
 ...
}
#header a {
 color: orange;
 #bundle > .button;
}

• 引入文件

@import "lib.less";
@import "lib";

• 字符串组合

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");