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语法中的混合部分。


less语言特性(一) —— 变量

上一篇:项目图片上传存储的目录部分代码思路Calendar类获取年月日


下一篇:less语言特性(二) —— 混合