神器 LESS

虽早早听说过 LESS 的芳名,但却没能实际去感受一回,今天一用才后悔莫急,要是早知道此神器如此好用,就该早早用在自己的网站当中,也好避免重复的 CSS,增加可维护性。


什么是 LESS

层叠样式表,CSS,大家肯定都认识。但是 CSS 过于陈旧,书写起来要远不如现代的编程语言来得灵活,这就导致维护和扩展 CSS 变得相当麻烦也极容易出错。LESS 是由 Alexis Sellier 创建的一套基于 CSS,但要远比 CSS 灵活的动态样式表语言,通过一些类似编程语言的语法对样式进行组织,而后通过编译器编译成传统的 CSS。


直接来感受下吧!

div
{
    -webkit-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    transform:rotate(20deg);
}

div p
{
    -webkit-transform:rotate(40deg);
    -moz-transform:rotate(40deg);
    -o-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
    transform:rotate(40deg);
}


上面的CSS代码中因为使用了 HTML 5 的特性,每句话前都有浏览器的前缀,而且在上下两个块中除了数字不一样其它通通一样。光20和40这两个数字就重复了5遍。重复的次数越多,出现问题的机率就越大。下面是使用 LESS 之后的代码。


@deg:20deg;

.rotate(@degree:20deg)
{
    -webkit-transform:rotate(@degree);
    -moz-transform:rotate(@degree);
    -o-transform:rotate(@degree);
    -ms-transform:rotate(@degree);
    transform:rotate(@degree);
}

div
{
    .rotate;
    
    p
    {
        .rotate(40deg);
    }
}


LESS 的代码中已经几乎看不见重复的代码了,取而代之的是一个自定义的叫做“rotate”的类,该类接受一个degree参数。而原来的两个块现在融合成了一个块,通过嵌套的方式来更直观的展示元素之间的关系。


通过上面这个实际例子,是不是一目了然孰优孰劣了?


如何编译

一个 LESS 文件以 .less 为扩展名,要想让这个被应用到页面元素上去,必须先将该文件编译成 .css 文件。编译的方式有两种:


预编译成静态CSS文件

预编译的意思就是在部署到 WEB 服务器之前,先把它翻译成浏览器认得的 .css 文件,这样在最终部署到服务器的代码中应该是找不到任何 .less 文件的,取而代之的是 .css 文件。这种方式适用于产品开发环境。

国内有人制作了一款预编译工具 Koala,非常好用,大家可以下载使用。

关于 Koala 的更多用法,请参考《koala使用指南


预编译成临时文件

上述这种方式虽然好用,但是每次都要用工具生成一下,还是稍显麻烦。如果只是自己拿来玩玩或者在开发环境中测试,那么我们不需要借助任何工具,只需要在 LESS 官网下载一个用于预编译的 js 文件,然后在页面中加上对该 JS 的引用就可以了。不过该 JS 出现的位置必须要在所有 LESS 之后。

大概的代码如下:

<html>
    <head>
        <link rel="stylesheet/less" type="text/css" href="styles.less">
        <script type="text/javascript" src="less.js"></script> <!-- 已经下载到本地 -->
    </head>
    <body>
        <div id="header">this is header</div>
    </body>
</html>

如果希望这段代码起作用,必须要把网站部署到 WEB 服务器上,因为只有通过 http 协议访问该页面,JS 才能正常执行。

你也可能需要在 WEB 服务器中添加一个 MIME 才能正常访问到 .less 结尾的文件,具体请见《让 IIS 支持 Less


基本语法

声明变量

语法:“@变量名:值”

实例:变量的声明和使用都必须加上“@”。

@deg:20deg;

div
{
    -webkit-transform:rotate(@deg);
}


运算符

语法:“变量*n”

实例:

@deg:20deg;

div
{
    -webkit-transform:rotate(@deg*2); //40deg
}


封装

语法:“.方法名(@变量名:默认值) { ... }”,如果不需要变量,可以简化成 “.方法名 {...}”。

实例:这个有点像类的定义,在使用的地方,可以向普通的方法调用一样,只是前面的“.”不能遗忘

.rotate(@degree:20deg)
{
    -webkit-transform:rotate(@degree);
    -moz-transform:rotate(@degree);
    -o-transform:rotate(@degree);
    -ms-transform:rotate(@degree);
    transform:rotate(@degree);
}

div
{
    .rotate; //使用默认的20deg
}

p
{
    .rotate(30deg); //使用30deg
}

在其它教程里,这种语法被翻译成 Mixin(混入), 我觉得不够直观,还是翻译成封装比较容易理解。


和编程语言一样,方法的参数可以没有,也可以有一个或多个。@argument 是一个特殊的变量,在这里表示所有参数,也就是只用使用这一个,那么传入的所有参数值就会用空格连接后作为 @argument 的变量值使用。

.shadow(@x:0,@y:0,@blur:0,@color:#000)
{ 
     -moz-box-shadow: @arguments; 
     -webkit-box-shadow: @arguments; 
     box-shadow: @arguments; 
} 
 
div 
{ 
     .shadow(2px,2px,2px,red); 
}

上述代码编译后,如下:

div 
{
    -moz-box-shadow: 2px 2px 2px #ff0000;
    -webkit-box-shadow: 2px 2px 2px #ff0000;
    box-shadow: 2px 2px 2px #ff0000;
}


嵌套规则

在 CSS 中,如果子元素需要样式的时候,是通过空格来区分父子关系,这样虽然简单,但是不够直观。而且当有很多子元素时,就会有冗余代码。


CSS写法

div p,div ul,div td,div ol
{
    display:block;
}

上面的写法重复了多次 div。


LESS写法

div
{
    p,ul,td,ol
    {
        display:block;
    }
}

干净而且直观。


@import 指令

这个指令应该不陌生,原来的 CSS 也可以使用这个指令。通过使用这个指令,我们就可以更好地做到类的划分,把同一组功能或方法放在其中一个 .less 文件中,然后在需要使用的地方,利用import导入。


utilities.less

.shadow(@x:0,@y:0,@blur:0,@color:#000)
{ 
     -moz-box-shadow: @arguments; 
     -webkit-box-shadow: @arguments; 
     box-shadow: @arguments; 
}


body.less

@import "utilities.less"; //可以省去 .less 这个扩展名

div
{
    p,ul,td,ol
    {
        display:block;
        .shadow(2px,2px,2px,red); 
    }
}


总 结

除了 LESS 之外,还有 SASS 也是一款 CSS 预编译器,与 LESS 有异曲同工之妙,本人还没有使用过,这里就不啰嗦了。在往后的 WEB 开发中,要多使用 LESS 来整理自己原有的 CSS 文件,从而方便日后的维护。


参考资源

LESS CSS 框架简介

Using Less.js to Simplify Your CSS3

文章索引

[隐 藏]

本站采用知识共享署名 3.0 中国大陆许可协议进行许可。 ©2014 Charley Box | About Site | 浙ICP备13014059号