【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) "文件路径";

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