【LESS系列】基本语法

这里将直接以实例的方式展示 LESS 的基本语法。

less code 是编译前的代码，css code 是编译后的代码。

本文的内容，同样是引自【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/】

1.变量

//less code

//定义一个变量
@border-color : #b5bcc7; 

.mythemes tableBorder{
  border : 1px solid @border-color;
}

//css code
.mythemes tableBorder {
  border: 1px solid #b5bcc7;
}

变量最常用的情境是定义主题，像字体颜色，背景颜色，边框样式等进行统一定义，统一定义图片资源路径也是一个不错的做法。

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念。

查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。

//less code

@width : 20px; 

#homeDiv {
  @width : 30px;
  #centerDiv{
    width : @width; //此处应该取最近定义的变量 width 的值 30px
  }
}

#leftDiv {
  width : @width; //此处应该取最上面定义的变量 width 的值 20px
}

//css code

#homeDiv #centerDiv {
  width: 30px;
}

#leftDiv {
  width: 20px;
}

2.混合Mixins

//less code

//定义一个模块
.roundedCorners(@radius:5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
} 

#header {
  .roundedCorners;
}

#footer {
  .roundedCorners(10px);
}

//css code

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

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

从上面的例子我们可以看出，LESS 的 Mixins 特性支持传参，默认值定义，我个人觉得如果你不是概念强迫症患者的话，完全可以把它当成是样式函数来理解。

除此之外，Mixins 也能像 Javascript 那样使用 arguments 变量，只是有一点点小区别。

在 LESS 里，@arguments 变量表示所有的变量，很多时候通过使用它，我们可以少写很多代码，请看下面例子：

//less code

//定义一个模块
.boxShadow(@x:0, @y:0, @blur:1px, @color:#000){
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  box-shadow: @arguments;
}

#header {
  .boxShadow(2px, 2px, 3px, #f36);
}

//css code

#header {
  -moz-box-shadow: 2px 2px 3px #f36;
  -webkit-box-shadow: 2px 2px 3px #f36;
  box-shadow: 2px 2px 3px #f36;
}

我们甚至能利用参数生产类名~

.create-color-btn (@color-name, @background-color, @border-color, @font-color) {
    .btn-@{color-name} {
        background: @background-color;
        border: 1px solid @border-color;
        color: @font-color;
    }
    .btn-@{color-name}:hover {
        background: @background-color * 1.05;
        border-color: @border-color * 1.05;
    }
    .btn-@{color-name}:active {
        background: @background-color * 0.9;
        border-color: @border-color * 0.9;
    }
}

.create-color-btn(blue, #4bb1cf, #4bb1cf, #ffffff);

/* 生成的CSS这里就不发出来了 */

3.值运算

//less code

@init: #111111; 

@transition: @init*2; 

.switchColor {
  color: @transition;
}

//css code

.switchColor {
  color: #222222;
}

对于一些数值型的值，LESS 是支持进行加减乘除四则运算的。

此外，LESS 还提供了一组函数，专门针对颜色运算操作。

lighten(@color, 10%); //颜色淡化
darken(@color, 10%); //颜色加深
saturate(@color, 10%); //饱和度增加
desaturate(@color, 10%); //饱和度降低
fadein(@color, 10%); //透明度增加
fadeout(@color, 10%); //透明度降低
spin(@color, 10); //色调调整（+10）
spin(@color, -10); //色调调整（-10）

这组函数直接返回具体的色值，看下面实例：

//less code

@init: #f04615;

#body {
  background-color: fadein(@init, 10%);
}

//css code

#body {
  background-color: #f04615;
}

4.嵌套规则

<div id="home">
  <div id="top">top</div>
  <div id="center">
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>

//less code

#home{
  color: blue;
  width: 600px;
  height: 500px;
  border: outset;
  #top{
    border: outset;
    width: 90%;
  }
  #center{
    border: outset;
    height: 300px;
    width: 90%;
      #left{
        border:outset;
        float: left;
        width: 40%;
      }
      #right{
        border: outset;
        float: left;
        width: 40%;
      }
   }
}

//css code

#home {
  color: blue;
  width: 600px;
  height: 500px;
  border: outset;
}
#home #top {
  border: outset;
  width: 90%;
}
#home #center {
  border: outset;
  height: 300px;
  width: 90%;
}
#home #center #left {
  border: outset;
  float: left;
  width: 40%;
}
#home #center #right {
  border: outset;
  float: left;
  width: 40%;
}

我们平时在编写 css 的时候，经常会遇到多层选择器嵌套的情况。

从上面的例子可以看出，LESS 可以用很简洁的代码来实现，有着更好的可读性。

同时，我们还可以使用 “&” 来进行同一层级的操作，比如组合类和伪类。

//less code

.link{
  text-decoration: none;
  &.red{
    color: #f00;
  }
  &:hover{
    text-decoration: underline;
  }
}    

//css code
.link{
  text-decoration: none;
}

.link.red{
  color: #f00;
}

.link:hover{
  text-decoration: underline;
}

5.导入指令(Import)

less样式文件可通过 @import '文件路径'; 引入外部的less文件。

注意：

不带扩展名或带非 .less 的扩展名均被视为 less 文件;

@import 可出现在任何位置，而不像 css 的 @import 那样只能放在文件第一行。

另外 @import 还提供了6个可选配置项(分别为 reference，inline，less，css，once，multiple)，用来改变引入文件的特性。

1. @import (reference) "文件路径";

将引入的文件作为样式库使用，因此文件中样式不会被直接编译为 css 样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。

2. @import (inline) "文件路径";

用于引入与 less 不兼容的 css 文件，通过 inline 配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式文件

3.@import (less) "文件路径";

默认使用该配置项，表示引入的文件为 less 文件。

4.@import (css) "文件路径";

表示当前操作为 css 中的 @import 操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件

5.@import (once) "文件路径";

默认使用该配置项，表示对同一个资源仅引入一次。

6.@import (multiple) "文件路径";

表示对同一资源可引入多次。