3、Less：高效CSS预处理器的特性与开发工具

Less：高效CSS预处理器的特性与开发工具

1. Less的强大特性

1.1 颜色处理示例

先来看一个简单的颜色处理示例：

.brown-color {
  @rgbaColor: rgba(150, 53, 41, 0.5);
  color: fade(@rgbaColor, 100%);
  color: @rgbaColor;
}

这里使用一个简单的变量定义基础颜色，再用 rgba 颜色函数将其转换为对应的RGBA值，透明度设为0.5。编译这段Less代码后，会生成如下CSS：

.brown-color {
  color: #963529;
  color: rgba(150, 53, 41, 0.5);
}

示例中的透明度为50%，这意味着在支持RGBA的浏览器中，能看到该颜色后面50%的内容。在创建网站主题时，函数的作用就会凸显出来，我们可以仅用两三种基础颜色就生成大量颜色。

1.2 告别浏览器前缀

使用CSS3时，很多新特性（如背景渐变、动画、盒阴影等）往往需要使用浏览器前缀或不同语法，以确保网站能被更多人访问。不过使用预处理器就没这么麻烦了。例如，要实现圆角效果，传统CSS代码如下：

.roundcorners { 
  -webkit-border-radius: 4px; 
  -moz-borde