首页 / 技术 / 正文

LESS初学入门基础知识笔记

2015年03月10日 2 条评论 ... 技术

在接触 bootstrap 的时候接触到一个以前没有见过的词 LESS,这个词与 CSS 类似,但是据说 LESS 是 CSS 的扩充,使用 LESS 不但可以方便的管理网站的样式,而且还可以更加灵活处理不同浏览器情况下的差异处理。对于开发者来讲,LESS 是一款方便编写的工具。

LESS 是在 CSS 的基础上增加了包含变量、混合、套嵌等扩展语法。不过虽然如此,浏览器并不支持直接识别 LESS,只有经过编译成 CSS 文档或者浏览器引入 less.js 文件即可使用 LESS 文件。举例:

  1. <link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="style.less" /> 
  2. <script language="JavaScript" type="text/JavaScript" src="less1.0.33.min.js"></script> 

如代码显示,LESS 文件的后缀是 *.less 在引入浏览器的时候,请注意 type 、rel 和 rev 都是与 CSS 的引入不太一样。

互联网的发展速度就是不断的颠覆,了解了 LESS 的优越性之后才知道之前手动编写的 CSS 既复杂又不规范。看来学是无止境的。使用 LESS 编写网站的优越性是不言而喻的,举个比较成功的例子,AkibaRika 的博客便是使用 LESS 编写的 CSS 。

AkibaRika

LESS 只是 CSS 的拓展,如果对 CSS 很熟悉的话,LESS 就非常容易掌握。对 LESS 的学习我也是刚刚开始,以下知识有不正确的地方还请大家多多指正。

工具准备

上文提到,LESS 可以编译成标准的 CSS 文档或者与 less.js 文件一起引入,一般来讲,如果没有特别的要求,为了节省服务器资源,都会选择预先编译好完整的 CSS 文件再引入。LESS 文件本身可以使用任何编辑器编写。所以编译工具必须要有。推荐的离线编译器有:simpless 或者 winless。

simpless

如果方便上网的话,也可以选择使用在线编译工具,详情可以去网上搜索。

LESS 基础语法简介

LESS 的语法是基于 CSS 的编写样式扩展的,理解起来非常简单。本文只是简单介绍。

1.变量

LESS 中引入的变量其实为常量,一旦被定义后无法修改。通过 @ 符号定义变量,定义后的变量可以在之后的编写中任意引用。举例如下:

@color: #f1f1f1;

.wrap{ color: @color; }

编译后的结果为:

.wrap{ color: #f1f1f1; }

2.混合

LESS 中可以编写类似于函数的语句,可以根据实际情况定制参数。同时也可以简化编写,比如说圆角的 CSS 属性在很多浏览器都没有统一格式的时候可以统一编写“函数”,在需要使用圆角的时候直接饮用。例如:

.round (@radius:5px) {

border-radius:@radius;

-webkit-border-radius:@radius;

-moz-border-radius:@radius;

}

.wrap{ round(10px); }

编译后的 CSS 代码为:

.wrap{

border-radius:10px;

-web-border-radius:10px;

-moz-border-radius:10px;

}

很明显,在.round (@radius:5px){} 函数中,默认的边角弧度是5px,如果不填写就是默认值。

3.套嵌和内嵌

为了更加方便阅读和理顺,LESS 提供了可以套嵌的编写方式,可以避免编写多层 CSS 选择器时出现的错误,举例如下:

#header{

h1{ font-size:24px; }

p{ font-size:12px;

     a{ text-decoration:none;

            &:hover{ border-width:1px;}

        }

   }

}

为了方便阅读,我把不一样的层次染上了颜色。编译后的效果为:

#header h1{ font-size:24px; }

#header p{ font-size:12px; }

#header p a{ text-decoration:none; }

#header p a:hover{ border-width:1px; }

这样看来,LESS 节省编写的效果就非常明显了。

内嵌则是直接在某个样式中直接嵌入其他样式的名称。使用方法是直接在花括号之内写上需要嵌入的样式名称。

4.运算

LESS 支持简单的运算,包括 +、-、*、/,和布尔判断,以及非常丰富的数学函数。可以实现颜色的递增递减或者按比例缩放等等。简单的例子:

@the-border:1px;

#header{ padding-right:@the-border*5; }

编译后的效果如下:

#header{ padding-right:5px; }

总结

只要看过几个例子就可以发现 LESS 的锋利之处——大大简化了开发者的工作量,如果编写的 LESS 合理的话,可以将一个网站的应该统一的样式使用相同的变量,则调试的时候只需要调整变量值就可以观察到效果,对网站的设计也是有非常大的帮助。

2 条评论

Loading...
  1. 冰龙

    用CSS写样式表也没什么难度,我感觉有学习less的语法的时间早就编好自己的样式表了… :?:

    2015-03-10 [回复]
    • 有野出没

      LESS 的优越性体现在如果编写大型网站的时候 CSS 的规范管理尤为重要。再说其实 LESS 的语法不难,只要有了 CSS 基础,稍微了解一下就可以完全掌握。

      2015-03-11 [回复]

发布评论