less语言特性（一） —— 变量

近两年移动市场不断扩大，HTML5也逐渐升温，为了使我们前端工作更有效率，各种框架层出不穷，本章将介绍LESSCSS框架。LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

因为LESSCSS的语言特性比较多，所以我们将分开介绍，本文将介绍LESS的引入方式及其语法中的变量部分。

一、引入方式：

1

2

<link rel="stylesheet/less" type="text/css" href="css/style.css">

<script src="js/less.js" type="text/javascript"></script>

link中rel的值必须跟上/less，href链接的文件后缀可以是css也可以是less文件。

script是less这个js文件，如果想要正常使用LESS的话必须引入，这里还需要注意一点的是如果您需要在IE6、7、8中使用，请先在引入less.js前先引入es5-shim。

还需注意的是引入文件的位置也是有讲究的，js要在css文件下方，这样才能去编译我们的LESSCSS。

二、LESS语法：

作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，而且你可以在任何时候回退到CSS。

A、变量

LESS中的变量允许你在样式中的某个地方对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果，我们先来看一段代码：

LESS写法：

1

2

3

4

5

6

7

@color: #999;

@fontSzie : 24px;

@line-h :1 ;

body{

background-color: @color;

font-size: @fontSzie;

}

编译成CSS：

1

2

3

4

body{

background-color: #999;

font-size:24px;

}

LESS变量还具有计算功能，如：

LESS写法：

1

2

3

4

5

@line-h :1 ;

@line-he : @line-h + 1;

body{

line-height:@line-he;

}

编译成CSS：

1

2

3

body{

line-height:2;

}

LESS可以在定义变量值时使用其它的变量：

LESS写法：

1

2

3

@color: red;

@rgb: "color";

Body {color: @@rgb;}

在@rgb中的color引用的就是它上边的@color变量。

编译成CSS：

1

body {color: red;}

在LESS中如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。

LESS写法：

1

2

3

4

5

6

7

8

9

10

@var: 0;

.class1 {

@var: 1;

.class {

@var: 2;

three: @var;

@var: 3;

}

one: @var;

}

编译成CSS：

1

2

3

4

5

6

.class1 .class {

three: 3;

}

.class1 {

one: 1;

}

在使用变量的方法的时候还需要注意一点的是：

变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。

下面是一个有效的LESS代码片段：

1

2

3

4

5

lazy-eval {

width: @var;

}

@var: @a;

@a: 9%;

同时LESS变量还很灵活，下面这个片段也是有效的：

1

2

3

4

5

6

.lazy-eval-scope {

width: @var;

@a: 9%;

}

@var: @a;

@a: 100%;

而以上两段代码都会编译成以下CSS：

1

2

3

.lazy-eval-scope {

width: 9%;

}

以上我们看到的变量都是存的属性值，此处不要有误区，变量很灵活，灵活在它的存储方式上，我们也可以用来存CSS属性。

例如:

1

2

3

4

5

6

7

8

@backg : background;

#player_btn{

@backg: #d6d6d6;

@backg: -webkit-linear-gradient(#fff, #d6d6d6);

@backg:-moz-linear-gradient(top, #fff, #d6d6d6);

@backg:-o-linear-gradient(top, #fff, #d6d6d6);

@backg:linear-gradient(to bottom, #fff, #d6d6d6);

}

变量可以用像 @{name} 这样的结构，以类似ruby和php的方式嵌入到字符串中：

1

2

@base-url: "http://assets.fnord.com/";

background-image: url("@{base-url}/images/bg.png");

同时，变量也可以存放选择器，例如：

1

2

3

4

@name: blocked;

.@{name} {

color: black;

}

Media也可以放在变量中，例如：

1

2

3

4

5

6

@singleQuery: ~"(max-width: 500px)";

@media screen, @singleQuery {

set {

padding: 3 3 3 3;

}

}

被编译为：

1

2

3

4

5

@media screen, (max-width: 500px) {

set {

padding: 3 3 3 3;

}

}

变量必须包含完整的media query。这样写会导致报错：@media screen and @partial {。

在1.4.0中，在开启严格运算模式的情况下，你也可以在media query的条件中插入变量。如@media screen, (max-width: @width) {。

以上为LESS语法中的变量部分，对于现在一站多平台兼容的市场需求下，此变量还是非常实用的。

下期将为大家介绍LESS语法中的混合部分。