LESS快速入门

Less 简介

简单来说，Less 就是让你在网页设计的时候，可以更方便地写 CSS 的工具。

Less官网的说明：

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算，函数.

 LESS 既可以在客户端上运行(支持IE 6+, Webkit, Firefox)，

也可以借助Node.js或者Rhino在服务端运行。

也就是说，你可以透过 Less 的语法使用 变量, 继承, 运算 和函数 这些工具，

再通过编译之后，less 就可以转成一般的 CSS，

于是让设计 CSS 这件事可以更加地有弹性。

// LESS

@color: #4D926F;

#header {

color: @color;

}

h2 {

color: @color;

}

编译出来的 CSS:

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}

=====================================

混合

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 的圆角设定，

目前因为浏览器的语法尚未统一，你需要写:

通过Less, 你只要写：

.border-radius (@radius) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}

header {

.border-radius(4px);

}

.button {

.border-radius(6px);

}

=======================================

less 提供的主要功能

arguments 变量

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

例如 CSS3 的阴影设定:

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

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





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

===============================

函数 & 运算

通常在设计 button 或是 border 的样式的时候，我们常常会需要一个

跟原本差不多的颜色。可能是亮一点点、暗一点点、或是鲜艳一点点

（例如：当做 button 一般的颜色、hover 上去的颜色, 点下去的颜色）。

而这样的东西，传统上我们是用 RGB 在调色盘上设好再设到 CSS 里，

但如果你对 HSB （色相、明亮度、饱和度）有那麽一点直觉的话，

Less 里面也可以让你直接用 function 来设定，

而输出来的 css，就会自动帮你算好相对应的 RGB 。例如：

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

转换之后css

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

======================================

模式匹配和导引表达式

有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：

// LESS
.mixin (dark, @color) {
//亮度降低 10%
  color: darken(@color, 10%);
}
.mixin (light, @color) {
//亮度增加 10%
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

运用到class上

.class {

  .mixin(light, #888);

}

转换之后css

.class {

  color: #a2a2a2;

  display: block;

}

==============================================

具体实现如下：

    第一个混合定义并未被匹配，因为它只接受dark做为首参

    第二个混合定义被成功匹配，因为它只接受light

    第三个混合定义被成功匹配，因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，

而变量以外的固定值就仅仅匹配与其相等的传入值。

导引

//lightness(@a) 从颜色值中提取 'lightness' 值（亮度）
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

.class1 { .mixin(#ddd) }

.class2 { .mixin(#555) }

.class1 {
  background-color: black;
  color: #ddd;
}

.class2 {
  background-color: white;
  color: #555;
}

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。