动态的样式语言less语法详解之变量与extend

简介

LESS是一种动态的样式语言，不仅语法简洁明了，而且扩展性强，利用LESS我们能够更方便、更快捷地写出复杂的样式代码，提升我们的开发效率。

本文将介绍LESS语法中涉及的变量(Variables)与扩展(Extend)。

变量(Variables)

LESS中的变量与Javascript中的变量有些相似，但是有些不同，我们要从以下几个方面来详细讲解：

定义变量

LESS中定义变量需要使用@符号，格式如下：

@变量名:值;

下面是一个例子：

@background-color: #f5f5f5;

说明：将颜色值#f5f5f5赋值给变量@background-color。

引用变量

在LESS语法中引用变量直接使用@变量名的方式引用，如下面的例子所示：

body { background-color: @background-color; }

说明：使用变量@background-color的颜色值，将整个文档的背景颜色设置为该颜色。

变量的作用域

变量作用域是我们要了解的另一个重要概念，其定义出生的位置就是变量的作用域。

在LESS中，变量按照其定义位置向外找作用域，例如：

#header {
  @V: red;
  border-color: @V;
}

上面的代码中，变量@V是定义在#header作用域内的，在其中使用@V的border-color属性也位于该作用域内。所以border-color中可以正确地引用@V，输出的样式代码将会是：

  #header {
    border-color: red;
  }

而当@V定义在某个选择器外，另一个选择器内使用了@V，则@V的作用域为全局，即整个文档都可以使用该变量。

变量的默认值

在LESS中，变量还有个很有用的特性，就是其可以设置默认值，当某个地方没有设置变量值时，LESS会使用默认值。如下面的例子所示：

@link-color: #ff0000;
.a { color: @link-color; }
.b { color: @link-color; }
.c { color: #00ff00; }

上面的代码中，有三个选择器a、b、c，其中c覆盖了link-color的值，为绿色。当a、b没有定义color属性时，则使用@link-color变量作为默认值。

变量的修改

在LESS中，变量是可以修改的，举个例子：

@width:10px;
#header {
  width:@width;
}
#content {
  width:@width;
  @width:20px;
  height:@width;
}

上面的代码中，定义了一个名为width的变量，值为10px。在#header作用域内使用了该变量，赋值为它的值，均为10px。

而在#content作用域内又改变了该变量值为20px，所以height属性的值使用了新的值20px。

变量的优秀特性与作用从上面几个例子中也可以看出，可以大幅度提升CSS的编写效率。

扩展(Extend)

LESS另一个重要的特性是扩展，扩展可以让我们简洁地编写出更多的样式代码。下面就来介绍一下扩展的特性。

基本语法

LESS中的扩展使用“&:extend()”语法，下面是一个示例：

.btn-blue {
  color:blue;
}

.btn-disabled {
  &:extend(.btn-blue);
  color:gray;
}

上面的代码中，我们定义了样式.btn-blue，用于表现蓝色按钮，而.btn-disabled则是样式.btn-blue的扩展。

具体来说，.btn-disabled使用&符号引用了当前选择器(btn-disabled)的父选择器(btn-blue)。再通过:extend()方法对btn-blue的样式进行了扩展。从而，获取到了网络效果与继承别人的样式功能。

输出的样式代码如下：

.btn-blue, .btn-disabled {
  color: blue;
}

.btn-disabled {
  color: gray;
}

引用不同级别的选择器

在LESS中，使用扩展也可以引用不同级别的选择器。例如：

.used-by-header{
  &:extend(header a:hover);
}

上面的代码中，我们定义了样式.used-by-header并扩展了header a:hover的样式。通过&符号，我们将同时拥有.used-by-header的样式及header a:hover的样式。

输出样式代码如下：

header a:hover, .used-by-header {
  // 对应样式
}

结论

本文中介绍了LESS语法中的变量(Variables)与扩展(Extend)，其中变量使用@符号定义，可以实现变量赋值、变量使用、变量作用域、默认值、变量修改等功能。扩展则是为了更加方便地管理样式代码，自我扩展、引用父级的样式等。

同时，建议在编写CSS时使用LESS预处理器，在代码编写、编译功能、代码复用方面都会很方便。