LESS详解之编译LESS

╰+攻爆jí腚メ 2022-09-17 13:11 483阅读 0赞

掌握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”的文件

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

## 　　特别注意 ##

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

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

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

## 　　高级设置 ##

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

## 　　监视模式 ##

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

在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，把文件夹拖入界面或者是在左侧加号处选择文件夹，此时在界面左边有文件夹路径产生。

![梦龙小站][SouthEast]

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

![梦龙小站][SouthEast 1]

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

![梦龙小站][SouthEast 2]

## 　　自动编译(实时编译) ##

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

![梦龙小站][SouthEast 3]

## 　　编译选项 ##

**行注释(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做好了坚实的准备。

[SouthEast]: /images/20220828/138b3c8a593a4b05bf670282ecb5aaf4.png
[SouthEast 1]: /images/20220828/f1283a5a58ac4ed0a5a7b2fc69e8152e.png
[SouthEast 2]: /images/20220828/98f2c270157a438f957060208d248f3e.png
[SouthEast 3]: /images/20220828/f9a41cd06e7f43beaa670392a5e8306e.png