LESS.js:动态样式表语言

LESS.js是JavaScript,一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。LESS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

如何上手

添加Less.js到项目的选项:

用NPM安装:npm install less

下载最新版本(Download the latest release

复制:

功能特性

LESS扩展了CSS的动态功能,例如:

  • Nesting(嵌套)
  • Variables(变量)
  • Operations(运算)
  • Mixins(混入类)
  • Extend(selector inheritance)(延伸(选择器继承))

了解已提供的Less.js的其他更多功能,请访问http://lesscss.org 和 the Less.js wiki

示例

Nesting(嵌套)

利用嵌套的优势,提高代码的可读性和可维护性。例:

输出:

Variables(变量)

变量也可以用在@import声明,网址,选择器名称和其他更多里。

Operations(运算)

继续用上面的示例,我们可以使用变量通过运算更简单的去维护,这个运算允许在你的样式里使用加减乘除。

输出:

Mixins(混入类)

“隐”混入类

混入类使得你可以将一个选择器的样式应用到另一个选择器里,像这样:

输出:

所以任何选择器都可以是“隐混入类”。 下面我们将展示一个DRYer的方法去做这个。

带参数的混淆 

混入也可以接受参数:

像这样用:

输出:

Extend(selector inheritance)(延伸(选择器继承))

延伸功能可以被认为和混入类相反。它完成了“借样式”的目标,而又不是从选择器A复制所有的规则到选择器B,延伸复制继承选择器的名字(选择器B)到扩展选择器(选择器A)。所以继续用上面混入类的示例,延伸工作如下:

输出:

  使用方法 编译和解析 从node调用编译器:

输出:

你也可以手动调用解析器和编译器:

配置

你也可以将选项传递给编译器:

更多信息

有关语言,配置选项或使用访问的一般信息,请访问 lesscss.org 或 the less wiki.

这些是关于使用Less.js的其他资源:

stackoverflow.com 是一个获得关于Less的答案的好地方.

node.js tools 用于把Less转换为CSS

GUI 编译Less

Less.js Issues 用于报告漏洞

贡献

请阅读 CONTRIBUTING.md。添加对于任何新功能或改变的功能的测试单元。用Grunt Lint和测试你的代码。

报告问题

在打开任何问题前,请先搜索已经存在的问题和阅读 Nicolas Gallagher写的问题指南。在此之后如果你发现漏洞或者想提出功能需求,请打开一个新问题。

请在项目文档里报告文档的问题。

开发

安装Less.js

通过手动下载这个工程( downloading this project)或者在命令行输入开始:

如果你之前没有运行grunt,安装全局的grunt-cli以便你可以运行grunt

你现在可以建立Less.js,运行测试,标记,和其他Gruntfile里列的任务。

使用Less.js Grunt

用 Grunt ~0.4.1.完成测试,标记和构建。如果你以前没有用过Grun,一定要检查上手指南,因为它解释了怎样安装和使用Grunt插件,这个插件对于用Less.js开发是必需的。

Less.js Gruntfile通过以下“方便的任务”配置:

test – grunt

运行 jshint, nodeunit 并用phantomjs进行headless jasmine 测试 .你必须安装phantomjs 来运行jasmine测试。

test – grunt benchmark

运行基准套件

构建测试浏览器-‘grunt browser’

这个构建less.js并且把它放进’test/browser/less.js’

build – grunt stable | grunt beta | grunt alpha

从 /lib/less 资源文件里构建Less.js. 这是由开发者发布一个新版本完成,如果你要创建一个拉拽请求 不要这样做。

readme -grunt readme

从模板建立一个README文件来确保元数据是最新的和(更可能是)正确的。请回顾Gruntfile来熟悉其他可得的任务。

请注意如果你有任何安装依赖或者运行任何Gruntfile命令的问题,请确保在本地node_modules directory卸载了早期的任何版本,并且清除了全局的npm缓存,然后尝试重新运行npm install。此后如果你还有问题,请让我们知道以便给予您帮助。

 项目主页:https://github.com/less/less.js

 

 

收藏

资源整理者简介:Ivy_Ling

(新浪微博:@Ivy_3372) 个人主页 · 贡献了2个资源


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer