LESS快速入门

什么是Less?

首先,介绍一下Less:

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

为什么选择Less?

业务需求:随着公司业务发展,需求越来越繁杂,多主题需求越来越强烈,急需一套可以换肤的机制。

技术原因:其实很简单,Less更简洁易用,也是Bootstrap推荐的,而我们的前端工程师本身也在使用NodeJS,Gulp等,所以使用Less比较适合我们的开发,语言不分好坏,只是适不适合。大家可以根据自己的实际情况进行选择。

如何开始使用Less?

现在让我们进入正文,开始学习如何使用这一利器。

1.安装

npm install -g less

如果你不知道npm是什么?请查看NPM介绍

2.命令行用法

一旦安装完成之后,你可以使用命令行来触发编译less文件,例如:

lessc styles.less styles.css

20160926111350

我们在使用命令行时也可以–clean-css对输出的css文件进行压缩处理。当然这是另外一个插件,你需要先运行以下命令进行安装。

具体使用方法可以查看GitHub地址

npm install -g less-plugin-clean-css

 

3.使用代码进行编译

var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, output) {
  console.log(output.css);
});

我们可以以此方式和gulp进行集成,达到实时编译。

4.浏览器端使用方法

官方说明:在浏览器中使用less.js对开发很好,但是不建议在生产环境中使用。

使用Less进行开发最简单的方法就是使用浏览器端方式,但是在生产环境,性能和可靠性更加重要,我们推荐使用node.js进行预编译或者其他的第三方可用的平台。

使用时,使用link标签链接到less文件,并且设置rel属性为:stylesheet/less。具体如下:

<link rel=”stylesheet/less” type=”text/css” href=”styles.less” />

下一步,下载less.js并且引入到页面的head中。

提示

  • 确保样式文件在脚本之前引入
  • 当你是用超过一个.less样式时,它们都是单独编译的,因此,在一个样式文件中,任何你定义的变量,混合使用,命名空间都是不可以在另外的样式文件中使用的。
  • 为了使用浏览器的原始策略来健在额外的资源文件必须要开启CORS。关于CORS

小小罗创意电视广告