在以往中,一直没有深入利用less的便利性。只是在用less的嵌套在编写css。
这篇文章,就是在css的基础上,学习less的种种。
什么是less
Less 是一门 CSS 预处理语言,可以为网站启用可自定义,可管理和可重用的样式表,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
使用less有什么好处
- LESS支持创建更清洁,跨浏览器友好的CSS更快更容易。
- LESS是用JavaScript设计的,并且创建在 live 中使用,其编译速度比其他CSS预处理器更快。
- LESS保持你的代码以模块化的方式,这是非常重要的,通过使其可读性和容易改变。
- 可以通过使用LESS 变量来实现更快的维护。
Less 在浏览器中使用
Less可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。
less在浏览器中使用,当你想编译less文件动态地需要而不是在服务器端,这是因为less是一个大的javascript文件。
首先,我们需要添加LESS脚本以在浏览器中使用LESS:
<script src="less.js"></script>
要在页面上找到样式标签,我们需要在页面上添加以下行。 它还创建带有编译css的样式标签。
<link href="styles.less" rel="stylesheet/less" type="text/css"/>
你以可以在引入脚本之前,通过编程方式在较少的对象上设置选项。 它将影响less的所有编程使用和初始链接标记。
<!-- 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>
-
async:它是一个布尔类型。 无论是否使用选项async,都会请求导入的文件。 默认为false。
-
dumpLineNumbers:这是一个字符串类型。 在输出css文件中,当设置dumpLineNumbers时,将添加源行信息。 它有助于调试特定规则来自。
-
env:这是一个字符串类型。 env可以在开发或生产上运行。 当文档URL以 file:// 开头或位于本地计算机中时,会自动设置开发。
-
errorReporting:当编译失败时,请设置错误报告方法。
-
fileAsync:它是一个布尔类型。 当一个页面与文件协议,然后它请求是否异步导入。
-
functions:它是对象类型和用户函数。
-
logLevel:它是一种数字类型。 它在javascript控制台中显示日志记录级别。
-
2:信息和错误
-
1:错误
-
0:没有
-
-
poll:在手表模式下,轮询之间的时间以毫秒为单位。 它是一个整数类型,默认情况下设置为1000。
-
relativeUrls:网址调整为相对,默认情况下,它设置为false,这意味着网址已经相对于条目少文件。 它是一个布尔类型。
-
globalVars:将全局变量列表插入代码。 字符串类型变量应该包含在引号中。
-
modifyVars:它与全局变量选项相反,它移动您的less文件末尾的声明。
-
rootpath:它设置每个URL资源开始时的路径。
-
useFileCache:使用每个会话文件缓存。 较少文件中的缓存用于调用modifyVars,其中所有较少的文件将不会再次检索。
node使用方法
安装lessc以供全局使用
以下命令用于使用npm(node package manager)安装lessc,以使less在全局可用。
npm install less -g
您还可以在包名称后面添加特定版本。 例如: npm install less@1.6.2 -g
安装Lessc用于节点开发
以下命令用于在项目文件夹中安装 lessc 最新版本。
npm i less -save-dev
它也被添加到你的项目package.json中的devDependencies。
命令行用法
当源设置为破折号或连字符( - )时,从标准输入读取输入。
lessc [option option=parameter ...] [destination]
例如,我们可以使用下面的命令编译.less到.css
lessc stylesheet.less stylesheet.css
我们可以使用以下命令编译.less到.css by并将结果缩小。
lessc -x stylesheet.less stylesheet.css
下篇文章less的基础用法