当前位置: 首页>前端>正文

less导入方式 less使用

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

可以运行在 Node、浏览器和 Rhino 平台上。

安装

在服务器端最容易的安装方式就是通过 npm (node.js 的包管理器),方法如下:

全局使用less

npm install less -g

如果你不在全局使用编译器,那么你可以:

npm i less --save-dev

命令行用法 1

安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:

$ lessc styles.less

这将输出编译之后的 CSS 代码到 stdout,你可以将输出重定向到一个文件:

$ lessc styles.less > styles.css

若要输出压缩过的 CSS,只需添加 -x 选项。如果希望获得更好的压缩效果,还可以通过 --clean-css 选项启用Clean CSS进行压缩。

帮助

lessc --help

lessc --h

路径

lessc --include-path=PATH1;PATH2

使用此来配置较少使用的路径列表,以查找导入的路径。

在node,设置路径选择:

{ paths: ['PATH1', 'PATH2'] }

Makefile 2

lessc -Mlessc --depends

No Color

lessc --no-color

不兼容IE

lessc --no-ie-compat

禁用JavaScript

lessc --no-js

Lint 3

lessc --lint

lessc --l

Silent

lessc -s
lessc --silent

Strict Imports

lessc --strict-imports

允许安全的HTTPS主机

lessc --insecure

版本

lessc -v lessc --version

压缩

lessc -x lessc --compress

代码中使用

可以像下面这样在代码中调用 Less 编译器(Node 平台)。

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

输出结果为:

.class { width: 2; }

Rhino命令行

命令行 rhino 版本需要包含以下两个文件:

  • less-rhino-.js - 编译执行,
  • lessc-rhino-.js - 命令行支持

命令行执行编译:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

以上将编译 styles.less 文件并保存为 styles.css 文件。输出文件的参数是可选的,如果没有指定该参数,less将默认输出到标准输出中(stdout)。

客户端用法

在客户端使用 Less.js 是最容易的方式,并且在开发阶段很方便,但是,在生产环境中,性能和可靠性非常重要,我们建议最好使用 node.js 或其它第三方工具进行预编译

那就开始吧,在页面中加入 .less 样式表的链接,并将 rel 属性设置为 "stylesheet/less":

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

接下来,下载less.js并通过 <script></script> 标签将其引入,放置于页面的<head> 元素内:

<script src="less.js" type="text/javascript"></script>

提示

  • 务必确保在 less.js 之前加载你的样式表。
  • 如果加载多个 .less 样式表文件,每个文件都会被单独编译。

浏览器选项

<script src="less.js"></script> 之前 定义全局的 less 对象就可以为 Less.js 设置参数:

<!-- set options before less.js script --> <script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="less.js"></script>

书籍推荐

Less Web Development Essentials, by Bass Jobsen, Foreword by Alexis Sellier

注释:

1、less.js用法:http://www.runoob.com/manual/lessguide/usage/#command-line-usage-installing-lessc-for-use-globally

2、Makefile:一个工程中的源文件不计其数,其按类型、功能、模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能操作,因为 makefile就像一个Shell脚本一样,其中也可以执行操作系统的命令。

3、Lint:lint是最著名的C语言工具之一,是由贝尔实验室SteveJohnson于1979在PCC(PortableC Compiler)基础上开发的静态代码分析,一般由UNIX系统提供。与大多数C语言编译器相比,lint可以对程序进行更加广泛的错误分析,是一种更加严密的编译工具。最初,lint这个工具用来扫描C源文件并对源程序中不可移植的代码提出警告。


https://www.xamrdz.com/web/2dm1939900.html

相关文章: