LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观。LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap)。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化,及其典型的应用场景,并将其与其他样式表语言进行比较。相信前端开发工程师会喜欢 LESS,灵活运用 LESS 以提高开发效率。

LESS 背景介绍

LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码,在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了(例如 Twitter 提供的 bootstrap 库就使用了 LESS)。那么,LESS 是从何而来呢?它和 SASS 等样式表语言又有何区别呢?

图 1.LESS 的官网介绍

根 据维基百科上的介绍,其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。当时 SASS 采用了缩进作为分隔符来区分代码块,而不是 CSS 中广为使用的括号。为了让 CSS 现有用户使用起来更为方便,Alexis 开发了 LESS 并提供了类似的功能。在一开始,LESS 的解释器也同样是由 Ruby 编写,后来才转而采用了 JavaScript. LESS 代码既可以运行在客户端,也可以运行在服务器端。在客户端只要把 LESS 代码和相应的 JavaScript 解释器在同一页面引用即可;而在服务器端,LESS 可以运行在 Node.js 上,也可以运行在 Rhino 这样的 JavaScript 引擎上。

说一点题外话,其实现在的 SASS 已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和 CSS 一样采用了大括弧作为风格符。后一种语法规则又名 SCSS,在 SASS 3 之后的版本都支持这种语法规则。SCSS 和 LESS 已经越来越像了,它俩之间更详细的对比可以参考 此链接

LESS 高级特性

我 们知道 LESS 拥有四大特性:变量、混入、嵌套、函数。这些特性在其他文章中已经有所介绍,这里就不复述了。其实,LESS 还拥有一些很有趣的特性有助于我们的开发,例如模式匹配、条件表达式、命名空间和作用域,以及 JavaScript 赋值等等。让我们来逐一看看这些特性吧。

模式匹配:

相信大家对 LESS 四大特性中的混入 (mixin) 依然印象深刻吧,您用它能够定义一堆属性,然后轻松的在多个样式集中重用。甚至在定义混入时加入参数使得这些属性根据调用的参数不同而生成不同的属性。那 么,让我们更进一步,来了解一下 LESS 对混入的更高级支持:模式匹配和条件表达式。

首先,让我们来回顾一下普通的带参数的混入方式:

清单 1. 带参数(及参数缺省值)的混入
.border-radius (@radius: 3px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.button {
.border-radius(6px);
}
.button2 {
.border-radius();
}
清单 2. 混入生成的 CSS 代码
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.button2 {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

从上面这个例子可以看出,在混入我们可以定义参数,同时也可以为这个参数指定一个缺省值。这样我们在调用这个混入时如果指定了参数 .border-radius(6px),LESS 就会用 6px来替换,如果不指定参数来调用 .border-radius(),LESS 就会用缺省的 3px来替换。现在,我们更近一步,不仅仅通过参数值来更改最终结果,而是通过传入不同的参数个数来匹配不同的混入。

清单 3. 利用不同的参数个数来匹配不同的混入

Html代码

.mixin (@a) {
color: @a;
width: 10px;
}
.mixin (@a, @b) {
color: fade(@a, @b);
} .header{
.mixin(red);
}
.footer{
.mixin(blue, 50%);
}
清单 4. 不同参数个数调用后生成的 CSS 代码
Html代码
.header {
color: #ff0000;
width: 10px;
}
.footer {
color: rgba(0, 0, 255, 0.5);
}

这个例子有些像 Java 语言中的方法调用有些类似,LESS 可以根据调用参数的个数来选择正确的混入来带入。现在,我们了解到通过传入参数的值,以及传入不同的参数个数能够选择不同的混入及改变它的最终代码。这两 个例子的模式匹配都是非常容易理解的,让我们换个思路,上面的例子中参数都是由变量构成的,其实在 LESS 中定义参数是可以用常量的!模式匹配时匹配的方式也会发生相应的变化,让我们看个实例。

清单 5. 用常量参数来控制混入的模式匹配

Html代码

.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@zzz, @color) {
display: block;
weight: @zzz;
} .header{
.mixin(dark, red);
}
.footer{
.mixin(light, blue);
}
.body{
.mixin(none, blue);
}

清单 6. 常量参数生成的 CSS 代码

Html代码

最后,我们把清单 1 中的代码做略微改动,增加一个无参的混入和一个常量参数的混入,您猜猜看最终的匹配结果会发生什么变化么?

清单 7. 无参和常量参数的模式匹配

Html代码

.border-radius (@radius: 3px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
} .border-radius (7px) {
border-radius: 7px;
-moz-border-radius: 7px;
}
.border-radius () {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
} .button {
.border-radius(6px);
}
.button2 {
.border-radius(7px);
}
.button3{
.border-radius();
}

下面的结果可能会出乎您的意料,无参的混入是能够匹配任何调用,而常量参数非常严格,必须保证参数的值 (7px)和调用的值 (7px)一致才会匹配。

清单 8. 加入了无参混入后生成的 CSS 代码

Html代码

.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button2 {
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button3 {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

条件表达式

有了模式匹配之后是方便了很多,我们能根据不同的需求来匹配不同的混入,但更进一步的就是利用条件表达式来更加准确,更加严格的来限制混入的匹配,实现的方式就是利用了 when这个关键词。

清单 9. 利用条件表达式来控制模式匹配

Html代码

.mixin (@a) when (@a >= 10) {
black;
}
.mixin (@a) when (@a < 10) {
white;
}
.class1 { .mixin(12) }
.class2 { .mixin(6) }
清单 10. 条件表达式生成的 CSS 代码

Html代码

.class1 {
black;
}
.class2 {
white;
}

利用 When 以及 <, >, =, <=, >= 是十分简单和方便的。LESS 并没有停留在这里,而且提供了很多类型检查函数来辅助条件表达式,例如 iscolorisnumberisstringiskeywordisurl等等。

清单 11. 条件表达式中支持的类型检查函数

Html代码

.mixin (@a) when (iscolor(@a)) {
black;
}
.mixin (@a) when (isnumber(@a)) {
white;
}
.class1 { .mixin(red) }
.class2 { .mixin(6) }
清单 12. 类型检查匹配后生成的 CSS 代码

Html代码

.class1 {
black;
}
.class2 {
white;
}

另外,LESS 的条件表达式同样支持 AND 和 OR 以及 NOT 来组合条件表达式,这样可以组织成更为强大的条件表达式。需要特别指出的一点是,OR 在 LESS 中并不是用 or 关键字,而是用 , 来表示 or 的逻辑关系。

清单 13. AND,OR,NOT 条件表达式

Html代码

.smaller (@a, @b) when (@a > @b) {
black;
}
.math (@a) when (@a > 10) and (@a < 20) {
red;
}
.math (@a) when (@a < 10),(@a > 20) {
blue;
}
.math (@a) when not (@a = 10) {
yellow;
}
.math (@a) when (@a = 10) {
green;
} .testSmall {.smaller(30, 10) }
.testMath1 {.math(15)}
.testMath2 {.math(7)}
.testMath3 {.math(10)}
清单 14. AND,OR,NOT 条件表达式生成的 CSS 代码

Html代码

.testSmall {
black;
}
.testMath1 {
red;
yellow;
}
.testMath2 {
blue;
yellow;
}
.testMath3 {
green;
}

命名空间和作用域

LESS 所带来的变量,混入这些特性其实很大程度上避免了传统 CSS 中的大量代码重复。变量能够避免一个属性多次重复,混入能够避免属性集的重复。而且使用起来更加灵活,维护起来也方便了许多,只要修改一处定义而无需修改 多处引用的地方。现在,让我们更进一步,当我定义好了变量和混入之后,怎么能更好的控制和运用它们呢,怎么避免和其他地方定义的变量及混入冲突?一个显而 易见的想法就是像其他语言一样引入命名空间和作用域了。首先我们来看一个 LESS 的作用域的例子。

清单 15. 变量的作用域

Html代码

@var: red;
#page {
@var: white;
#header {
color: @var;
}
}
#footer {
color: @var;
}

在这个例子里,可以看到 header 中的 @var会首先在当前作用域寻找,然后再逐层往父作用域中寻找,一直到顶层的全局作用域中为止。所以 header 的 @var在父作用域中找到之后就停止了寻找,最终的值为 white。而 footer 中的 @var在当前作用域没找到定义之后就寻找到了全局作用域,最终的结果就是全局作用域中的定义值 red。

清单 16. 变量作用域例子生成的 CSS 代码

Html代码

#page #header {
color: #ffffff; // white
}
#footer {
color: #ff0000; // red
}

了解了作用域之后让我们再来看一下命名空间,我们可以用命名空间把变量和混入封装起来,避免和其他地方的定义冲突,引用起来也十分方便,只要在前面加上相应的命名空间就可以了。

清单 17. 命名空间的例子
Html代码
 @var-color: white;
#bundle {
@var-color: black; .button () {
display: block;
border: 1px solid black;
@var-color;
}
.tab() { color: red }
.citation() { color: black}
.oops {weight: 10px}
} #header {
color: @var-color;
#bundle > .button;
#bundle > .oops;
}

这里可以看出,我们利用嵌套规则在 #bundle中建立了一个命名空间,在里面封装的变量以及属性集合都不会暴露到外部空间中,例如 .tab(), .citation()都没有暴露在最终的 CSS 代码中。而值得注意的一点是 .oops 却被暴露在了最终的 CSS 代码中,这种结果可能并不是我们想要的。其实同样的例子我们可以在混入的例子中也可以发现,即无参的混入 .tab()是和普通的属性集 .oops不同的。无参的混入是不会暴露在最终的 CSS 代码中,而普通的属性集则会现在出来。我们在定义命名空间和混入时要小心处理这样的差别,避免带来潜在的问题。

清单 18. 命名空间例子生成的 CSS 代码
#bundle .oops {
weight: 10px;
}
#header {
color: #ffffff;
display: block;
border: 1px solid black;
#000000;
weight: 10px;
}

JavaScript 赋值 (JavaScript Evaluation)

如 果能在 CSS 中使用一些 JavaScript 方法无疑是十分令人兴奋的,而 LESS 真正逐步加入这项功能,目前已经能使用字符串及数字的常用函数了,想要在 LESS 中运用 JavaScript 赋值只需要用反引号(`)来包含所要进行的操作即可。让我们看看实例吧。

清单 19. JavaScript 赋值的例子
.eval {
js: `1 + 1`;
js: `(1 + 1 == 2 ? true : false)`;
js: `"hello".toUpperCase() + '!'`;
title: `process.title`;
}
.scope {
@foo:;
var: `this.foo.toJS()`;
}
.escape-interpol {
@world: "world";
width: ~`"hello" + " " + @{world}`;
}
.arrays {
@ary: 1, 2, 3;
@ary2: 1 2 3;
ary: `@{ary}.join(', ')`;
ary: `@{ary2}.join(', ')`;
}

我们可以看到,在 eval 中我们可以用 JavaScript 做数字运算,布尔表达式;对字符串做大小写转化,串联字符串等操作。甚至最后能够获取到 JavaScript 的运行环境(process.title)。同样可以看到 LESS 的作用域和变量也同样在 JavaScript 赋值中使用。而最后的例子中,我们看到 JavaScript 赋值同样运用于数组操作当中。其实 LESS 的 JavaScript 赋值还有支持其他一些方式,不过目前尚未公布出来。

清单 20. JavaScript 赋值生成的 CSS 代码
.eval {
js:;
js: true;
js: "HELLO!";
title: "/Users/Admin/Downloads/LESS/Less.app/Contents/Resources/engines/bin/node";
}
.scope {
var:;
}
.escape-interpol {
width: hello world;
}
.arrays {
ary: "1, 2, 3";
ary: "1, 2, 3";
}

LESS 开发的实用工具 – LESS.app

在 LESS 开发中,我们可以用 LESS 提供的 JavaScript 脚本来在运行时解析,将 LESS 文件实时翻译成对应的 CSS 语法。如下面这个例子:

清单 21. helloworld.html
<link rel="stylesheet/less" type="text/css" href="helloworld.less">
<script src="less.js" type="text/javascript"></script> <div class="helloworld">Hello World!</div>

从上 面的示例可以看出,在 helloworld.less 引入之后我们还添加了一个 JavaScript 文件,这个文件就是 LESS 的解释器,可以在 LESS 的官方网站上下载此文件。需要注意的是,要注意 LESS 文件和 LESS 解释器的引入顺序,确保所有的 LESS 文件都在 LESS 解释器之前。

看到这里也许有人会说,实时解析的话方便倒是方便,可以性能上不就有损耗了么?比起普通 CSS 来说多了一道解释的手续。也许还有的人对写好的 LESS 文件不太放心,希望能看到解析之后的 CSS 文件来检查下是否是自己希望的内容。这两个问题其实都是能够解决的,LESS 提供了服务端的方案,使用 npm 安装 LESS 之后就能够将您所有的 LESS 文件批量转化成 CSS 文件,然后您拿到 CSS 文件就可以随心所欲了,检查生成的内容是否有误,也可以直接在 HTML 中引用,再也不用添加 LESS 的 JavaScript 文件来解析它了。关于这部分的详细安装信息,可以直接参考 LESS 官网上的介绍,这里就不复述了。

不过,对于 Mac 用户来说还有一个更方便的工具可以使用,它就是 less.app. 这是一个第三方提供的工具,使用起来十分方便,我们可以在下图所示的界面上添加 LESS 文件所在的目录,此工具就会在右侧列出目录中包含的所有 LESS 文件。最酷的是,从此您就不用再操心惦记着要把 LESS 文件编译成 CSS 文件了,这个工具会在您每次修改完保存 LESS 文件时自己执行编译,自动生成 CSS 文件。这样,您就可以随时查看 LESS 代码的最终效果,检查目标 CSS 是否符合您的需要了,实在是太方便了!

图 2. 导入 LESS 文件夹的界面,左侧可添加存放在多个不同路径的文件夹。

图 3. 编译结果界面,在此可手动批量编译所有 LESS 文件。

更值为称道的是,LESS.app 还是个免费软件,接受捐赠:)

总结

通过上面的简单介绍,希望大家了解到了 LESS 的主要功能,相信 LESS 会让前端攻城师的工作更为轻松,更加灵活。更多的细节可以参考 LESS 官方网站。

原文:http://www.ibm.com/developerworks/cn/web/1207_shenyi_lesscss/

初步认识Less的更多相关文章

  1. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  2. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  3. Android自定义View初步

    经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...

  4. 初步认识Node 之Node为何物

    很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了.    Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...

  5. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  6. 基于C/S架构的3D对战网络游戏C++框架 _05搭建系统开发环境与Boost智能指针、内存池初步了解

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  7. Azure底层架构的初步分析

    之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...

  8. CozyRSS开发记录14-RSS源管理初步完工

    CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...

  9. 初步了解CPU

    了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...

  10. Windows多线程多任务设计初步(转)

    Windows多线程多任务设计初步 [前言:]当前流行的Windows操作系统,它能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程 ...

随机推荐

  1. [转载] Java CheckBoxTree

    代码基本上是copy的.只是在使用上有一些自己的想法. 先上code吧! 虽然别的地方也有.但是还是转一份给自己. 出处:http://blog.csdn.net/joy_125/article/de ...

  2. JavaScript Array map() 方法

    语法: array.map(function(currentValue,index,arr), thisValue) currentValue:必须.当前元素的值index:可选.当期元素的索引值ar ...

  3. [Android Pro] Android开发实践:自定义ViewGroup的onLayout()分析

    reference to : http://www.linuxidc.com/Linux/2014-12/110165.htm 前一篇文章主要讲了自定义View为什么要重载onMeasure()方法( ...

  4. JPA快速入门(自用)

    该案例为JPA的实体映射案例,将该项目解压导入到myeclipse中即可使用,然后直接使用hibernate即可! 文件地址:files.cnblogs.com/mrwangblog/JPA-Hibe ...

  5. 移动wap隐藏的坑

    非原创,只做转载 ------------------------------------------------------------------------------------------- ...

  6. JAVA 中配置IKAnalyzer扩展词库和停止词库

    1.后缀名.dic的词典文件,必须如使用文档里所说的 无BOM的UTF-8编码保存的文件.如果不确定什么是 无BOM的UTF-8编码,最简单的方式就是 用Notepad++编辑器打开,Encoding ...

  7. wap支付宝接口的问题

    今天在支付宝接口开发时,遇到的两个坑 第一个: https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.8nHr4i& ...

  8. Lattice FIFO 使用之FIFO_DC输入输出宽度不同时 的一个注意事项

    在使用FIFO_DC的时候,我们知道这个FIFO的一个功能是可以输入输出的数据宽度不一样,比如: 输入数据为128bit,输出数据为16bit,FIFO内部可以实现这样的转换,但是输出的时候是先送出一 ...

  9. MongoDB聚合运算之mapReduce函数的使用(11)

    mapReduce 随着"大数据"概念而流行. 其实mapReduce的概念非常简单, 从功能上说,相当于RDBMS的 group 操作 mapReduce的真正强项在哪? 答:在 ...

  10. 转:SqlServer2012自增列值突然增大1000的原因及解决方法

    原文链接:http://blog.csdn.net/phoenix36999/article/details/53304126 首先排除数据回滚及增加删除等操作. 按照这篇文章SQL Server 2 ...