LESS - 在浏览器中使用 Less
当您想在需要时动态编译 Less 文件而不是在服务器端时,Less 可在浏览器中使用;这是因为 less 是一个很大的 javascript 文件。
首先,我们需要添加 LESS 脚本以在浏览器中使用 LESS −
<script src = "less.js"></script>
要在页面上找到样式标签,我们需要在页面上添加以下行。它还会使用编译后的 css 创建样式标签。
<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>
设置选项
在脚本标记之前,可以通过编程方式在 less 对象上设置选项。它将影响 less 和初始链接标记的所有编程使用。
例如,我们可以按如下方式设置选项 −
<script> less = { env: "development" }; </script> <script src = "less.js"></script>
我们还可以在脚本标签上以另一种格式设置选项,如下所示 −
<script> less = { env: "development" }; </script> <script src = "less.js" data-env = "development"></script>
您还可以将这些选项添加到链接标签中。
<link data-dump-line-numbers = "all" data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' rel = "stylesheet/less" type = "text/css" href = "less/style.less">
属性选项需要考虑的点有−
window.less < script tag < link tag是重要性级别。
data属性不能使用驼峰命名法;link标签选项以时间选项表示。
非字符串值的数据属性应为JSON有效。
监视模式
可以通过将env选项设置为development并在添加less.js文件后调用less.watch()来启用监视模式。如果希望临时启用监视模式,则在URL中添加#!watch。
<script>less = { env: 'development'};</script> <script src = "less.js"></script> <script>less.watch();</script>
修改变量
启用 LESS 变量的运行时修改。调用新值时重新编译 LESS 文件。以下代码显示了修改变量的基本用法 −
less.modifyVars({ '@buttonFace': '#eee', '@buttonText': '#fff' });
调试
我们可以将选项 !dumpLineNumbers:mediaquery 添加到 url 或 dumpLineNumbers 选项,如上所述。mediaquery 选项可以与 FireLESS 一起使用(它显示原始 LESS 文件名和 LESS 生成的 CSS 样式的行号。)
选项
在加载脚本文件 less.js 之前,必须在全局 less 对象中设置选项。
<script> less = { env: "development", logLevel: 2, async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, globalVars: { var1: '"string value"', var2: 'regular value' }, 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 − URL 调整为相对;默认情况下,此选项设置为 false。这意味着 URL 已经相对于条目 less 文件。它是布尔类型。
globalVars − 将全局变量列表插入代码中。字符串类型变量应包含在引号中
modifyVars − 它与全局变量选项不同。它将声明移到 less 文件的末尾。
rootpath − 它在每个 URL 资源的开头设置路径。
useFileCache − 使用每个会话文件缓存。less 文件中的缓存用于调用modifyVars,其中所有less文件都不会再次检索。