LESS详解之编译LESS

 

掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CSS预处理语言，所以需要编译。下面为大家介绍一下编译的方法。

浏览器端编译

LESS可以在浏览器端不用编译直接使用。在浏览器端使用LESS的时候，需要引入一个JS文件，这个JS文件能够把LESS文件在浏览器端编译成CSS文件，然后在呈现到页面上。

使用方法

1、下载less-1.4.2.min.js文件;

下载地址：http://www.leemagnum.com/js/less-1.4.2.min.js

2、页面引入后缀名为“.less”的文件

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

3、页面引入下载过的less-1.4.2.min.js的文件

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

特别注意

A、LESS文件要在LESS脚本之前引用

B、必须在http(s)协议下使用

C、.less文件不可以跨域使用(可以通过在服务端设置CORS来解决)

高级设置

引入less.js之前通过创建一个全局less对象的方式来指定参数

<script type="text/javascript">
    less = {
        env: "development", // 或者"production"
        async: false,       // 异步加载导入的文件
        fileAsync: false,   // 使用文件协议访问页面时异步加载导入的文件
        poll: 1000,         // 在监视模式下，每两次请求之间的时间间隔（ms）
        functions: {},      // user functions, keyed by name
        dumpLineNumbers: "comments", // 或者"mediaQuery"，或者"all"
        relativeUrls: false,// 是否调整相对路径
                            // 如果为false，则url已经是相对入口less文件的
                            // entry less file
        rootpath: ":/a.com/"// 添加到每个url开始处的路径
    };
</script>
<script src="less.js" type="text/javascript"></script>

监视模式

监视模式是一种在客户端(浏览器)使用时的特性，它会在样式文件有更新时自动刷新页面。

在URL中加入#!watch并刷新页面即可开启监视模式。你也可以通过在console中运行less.watch()来开启监视模式。

修改变量

使用modifyVars可以在运行时修改LESS变量。当用新的变量值调用了这个函数时，LESS文件将会被重新编译，但不会被重新加载。一个基本的用法示例：

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

调试LESS

我们在生成的CSS中带上一些额外的信息，以便一些调试工具可以定位到LESS文件中的行数。可以通过dumpLineNumbers选项或者在url中添加!dumpLineNumbers:mediaQuery来开启这个功能。你可以选择“注释”方式，使用FireLESS来调，或者选择“mediaQuery”方式，使用FireBug/Chrome开发者工具(被识别为SCSS media query调试格式)来调试。

使用koala本地编译

Koala 是一款由国人开发的开源预处理语言图形编译工具，目前已支持 Less、Sass、Compass 与 CoffeeScript。目前支持以下系统：Windows，Mac, 10.7+，Linux: 32bit / 64bit，Ubuntu: 32bit / 64bit;下载可以去百度搜索“koala下载”进行下载。下面就针对编译LESS进行介绍。

使用方法

1、安装完成后打开 Koala，把文件夹拖入界面或者是在左侧加号处选择文件夹，此时在界面左边有文件夹路径产生。

2、同时有 less 文件将显示在界面中间，右键文件选择输出 CSS 文件的路径。

3、左键点击 less 文件在右边则有功能选项栏弹出，下面将介绍功能。

自动编译(实时编译)

当开启自动编译时，使用编辑器按下 Ctrl+S 保存时，CSS 文档会自动更新。如果没有打开这个功能，那么需要使用者在自行点击"执行编译"才更新 CSS 文档。

编译选项

行注释(line comments)：这个功能会在 css 文件里对应的 less 编译出来的 css 代码上方提供一个注释。注释的内容分别说明来自 less 的第几行开始，同时标明是来自那个 less 文件。小例子如下

LESS代码

@color: #4D926F;

.meng {
    color: @color;
}

编译后CSS代码

/* line 3, a.less */
.meng {
  color: #4d926f;
}

调试信息(debug info)：这个调试功能是在保存时自动检测有无错误，注意实时编译关闭时不会开启，需要在你执行时才弹出错误。所以，建议开启实时编译。目前调试功能仅能检测出一些影响编译的错误：例如没有带{}、没带分号。这些错误，而有没有使用选择器或者样式输入错误则不会提示。小例子如下

LESS代码

@color: #4D926F;

.meng {
    color: @color;
}

编译后CSS代码

@media -sass-debug-info{filename{font-family:file\:\/\/E\:\/李梦龙-文档\/LESS\/LESS详解之koala编译LESS\/less\/b\.less}line{font-family:\000033}}
.meng {
  color: #4d926f;
}

严格的数学(strict Math)和严格的单位(strict Units)是Koala 2。0新加的两个，目前还没有研究有啥区别编译出来都是没有注释的。小例子如下

LESS代码

@width : 2.233323232em;

.meng {
   width:@width;
}

编译后CSS代码

.meng {
  width: 2.233323232em;
}

输出方式(代码压缩)

正常(normal)：顾名思义，就是不压缩。

LESS代码

@width : 2.233323232em;

.meng {
   width:@width;
   .leng {
	width:@width;
   }
}

编译后CSS代码

.meng {
  width: 2.233323232em;
}
.meng .leng {
  width: 2.233323232em;
}

压缩(compress)：顾名思义，就是压缩。

LESS代码

@width : 2.233323232em;

.meng {
   width:@width;
   .leng {
	width:@width;
   }
}

编译后CSS代码

.meng{width:2.233323232em}.meng .leng{width:2.233323232em}

YUI压缩(YUIcompress)：使用 YUI 的压缩打包工具进行压缩。

LESS代码

@width : 2.233323232em;

.meng {
   width:@width;
   .leng {
	width:@width;
   }
}

编译后CSS代码

.meng{width:2.233323232em}.meng .leng{width:2.233323232em}

LESS详解之编译LESS就为大家介绍到这里了。了解了LESS是怎么编译的，才能更好的了解LESS的语法知识。有了LESS编译法宝，为我们了解LESS做好了坚实的准备。