Skip to content
This repository has been archived by the owner on Apr 27, 2021. It is now read-only.

Less动态式样语言简介

yfwz100 edited this page Jan 19, 2013 · 2 revisions

LESS 本身是一个对 CSS 语法的改进版本,并没有带来新的 CSS 解决不了的功能、也没有改变 CSS 属性的行为。只是按照 CSS 的本质进行思考,衍生出更自然的语法,而新的语法和旧的语法也是一一对应的,只是编写起来更方便了。所以,即使转移到这个技术,也不会对这个技术造成很大的依赖。

简述

概括起来说,LESS 主要在 CSS 中引入了变量、可复用代码段(函数混合)、更自然的嵌套规则引入外源LESS文件这四个方面对 CSS 进行语法上的改进的,可以参考以上的链接。

对这四方面的一些情况说明:

  • 引入变量是因为 CSS 可能造成大量的相同变量重复,但是如果没有这方面需要的话,可以直接忽略。
  • 可复用代码段就显得比较重要了,相信写过 -moz-border-radius 这样的兼容语句的人来说,肯定会有这样的想法,为什么不能声明一个函数直接对这些相同类型的属性一次性进行设置呢?这时候,LESS 中混合(Mixins)的概念就出来了,具体语法就不说了,它的作用主要就是为了避免重复写相同的代码。如果你觉得没必要,也可以不写。
  • 函数在 LESS 中是一个比较重要的东西,特别是色彩函数,可以方便地对某一种颜色进行基于这种颜色的更改,例如更改亮度等。不过,用不到就忽略~
  • 引入外源 LESS,这个语法实际上和 CSS 2.1 标准的 @import 语法相似,但是,不同的是,LESS 的外源引用会把外部的 LESS 合并到当前的 LESS 中,然后最终生成一个 CSS 文件。这样可以节省流量(如果你清楚 HTTP 协议的话就会知道原因,简单来说,节省请求的数量就可以节省流量,虽然不是很明显)
  • 至于嵌套,详情看文档吧,因为这个嵌套主要是针对 CSS 规则的组织而言。如果你自己对 CSS 文件整理得好的话,其实不需要这种嵌套语法。

要强调的是,这些都是可选的,如果不喜欢,可以直接用 CSS 原有的语法。不需任何修改,CSS 文件也符合 LESS 文件的规范。至于现实中的使用例子,看看 Bootstrap 的源码就知道了, Bootstrap 给我们提供了一些不错的思路。

特别说明

由于看到网上有部分人攻击 LESS ,慎用 LESS,所以就说说要注意的问题吧。其实,大多数这方面的负面陈述都是指向传统的语言(例如Java、C#)。对于传统语言来说,并没有考虑到以后的发展情况,所以对于传统语言来说,新的技术基本上都是一个障碍。那么在这些情况下,使用 LESS 的确要谨慎。那么,是不是传统语言对 LESS 就不支持了呢?也并不是的, LESS 同样照顾到传统语言,只是麻烦一点而已。但是,考虑到我们目前使用的 node.js 以及 expres.js 的灵活架构,我们可以很方便地对 LESS 进行 LESS 到 CSS 的自动转换。所以,并不用担心这个问题。而 Ruby 的社区似乎也很关注 LESS 哦~

参考

转到 http://www.lesscss.net/ 查看整体情况。:)

Clone this wiki locally