LESS 教程

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标签<链接标记是重要性级别.
数据属性不能用驼峰编写;链接标记选项表示为时间选项.
具有非字符串值的数据属性应该是JSON有效.

监视模式

可以通过将env选项设置为 development 来启用监视模式并调用添加less.js文件后， less.watch().如果您希望临时启用监视模式，请将#！watch 添加到URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

修改变量

启用LESS变量的运行时修改.调用新值时，将重新编译LESS文件.以下代码显示了修改变量的基本用法 :

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

调试

我们可以将选项！dumpLineNumbers:mediaquery 添加到网址或 dumpLineNumbers 选项如上所述. mediaquery 选项可以与FireLESS一起使用(它显示LESS生成的CSS样式的原始LESS文件名和行号.)

选项

在加载脚本文件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:没什么