【less】Bootstrap / Less 学习

我是借助的 考拉 来编译LESS~~ http://www.openkoala.org/download.html 官网

less 提供的主要功能

1.变量
个人觉得，变量是 Less 最重要的功能。举例来说，在设计的时候，我们常常会在很多个地方使用相同的色码 (或是用很相近的颜色）来塑造整体的感觉，例如在 h1, h2, h3, button, link hover color, …. 。
在以往设计 CSS 的时候，我们可能需要在这些 tag 的样式里面做各自的设定。但现在通过变量 ，我们可以在最上面宣告一个 base color, 然后在其他地方反覆使用这个 base color。这样网站在做设计上的调整时，就可以省下很多时间。
举例来说，下面是 Less 的写法:

// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
----------------------
下面是编译出来的 CSS:

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

2.混合
mixins让你可以重覆利用某些样式的宣告，你可以在 A 样式里面包括另一个 B class, 所有被 B class 的样式都会被嵌入进来 A 这个样式设定。
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }

那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:
#menu a { color: #111; .bordered; }

下面是转出来的 CSS:
#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; }

带参数混合

这个最好用的地方就是在简化一些比较不好写的 css, 例如 CSS3 的圆角设定，目前因为浏览器的语法尚未统一，你需要写:

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

但通过Less, 你只要写：

.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

是的，正如你所看到， mixins 不只可以把某个 class include 进来，甚至可以在 include 的时候指定一个参数！！猜猜看现在如果你又需要一个 10 px 的 border-radius, 你还需要写几行?
1 行！

@arguments 变量
@arguments包含了所有传递进来的参数。

例如 CSS3 的阴影设定，目前因为浏览器的语法尚未统一，你需要写:

.boxShadow (@x: 0, @y: 0, @blur: 1px, @shadow: #000) {
-webkit-box-shadow: @x @y @blur @shadow;
-moz-box-shadow: @x @y @blur @shadow;
box-shadow: @x @y @blur @shadow;
}

如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

运用到#nav上：

#nav{
     .box-shadow(2px, 5px);
 }

下面是转出来的 CSS:

#nav{
  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;
}

3.嵌套规则

CSS selector 里面有一个重要的用法，叫做后代选择器 (Descendant selectors)
也就是说，你可以用下面这段样式去设定你 ID=header 这个 container 中， h1, p, p 下面的 a, p 下面的 a 的 hover 样式各要怎麽设定：

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

这样的写法虽然很好理解，但要对于编写的人或是要修改的时候，就不是那麽方便了，因为你要改一下 header ，相关的样式可能散佈在 CSS 档的好几个地方。但在 Less 里面，我们可以有更好的做法：

// LESS
#header{
   h1{
       font-size: 26px;
       font-weight: bold;
   }
   p{
       font-size: 12px;
    a{
        text-decoration: none;
     &:hover{border-width: 1px;}
    }
   }
 }

4.函数 & 运算

通常在设计 button 或是 border 的样式的时候，我们常常会需要一个跟原本差不多的颜色。可能是亮一点点、暗一点点、或是鲜艳一点点（例如：当做 button 一般的颜色、hover 上去的颜色, 点下去的颜色）。而这样的东西，传统上我们是用 RGB 在调色盘上设好再设到 CSS 里，但如果你对 HSB （色相、明亮度、饱和度）有那麽一点直觉的话，Less 里面也可以让你直接用 function 来设定，而输出来的 css，就会自动帮你算好相对应的 RGB 。例如：

// LESS
@base-color: #111;
@red: #842210;
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

下面是转出来的 CSS:

#footer {
color: #114411;
border-color: #7d2717;
}

模式匹配和导引表达式
有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：

// LESS
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

运用到class上：

.class {
  .mixin(light, #888);
}

下面是转出来的 CSS:

.class {
  color: #a2a2a2;
  display: block;
}

具体实现如下：

第一个混合定义并未被匹配，因为它只接受dark做为首参
    第二个混合定义被成功匹配，因为它只接受light
    第三个混合定义被成功匹配，因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。

引导
当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。
为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

以此例做为开始：
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

下面是转出来的 CSS:
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

Color 函数
Less 里面提供的 functions 还包括：

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
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