eclipse安装less插件

一、前言

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

通俗理解即是：Less加入了变量，函数以及一些其它的因素，我们用less写出来的代码，需要经过less命令编译成最终能被浏览器识别的css。当然，网上有不少编译器，如koala，但是本人觉得使用起来不方便，还是eclipse插件好。

二、请先翻墙

由于网络的原因，如果不翻墙，可能会在获取安装文件的时候过不去。

三、安装Less编译器

1. 安装node.js,官网：https://nodejs.org/en/
2. 以管理员身份打开命令提示符，键入以下命令：

npm install -g less

四、安装less插件

1. Help -> Eclipse Marketplace -> 输入“less” -> 安装”Eclipse plugin
   for LESS 1.0.19”。
2. 安装完，重启eclipse。

五、配置Less编译启动器

1. 在.less文件上右击 -> Run As -> Run Configurations…
   

2. 在窗口左侧找到”LESS Compiler”，单击，添加一个启动器
   

3. 配置Less参数，如图：
   

六、编译.less文件

• 在.less文件上右击 -> Run As -> Less Compiler

• 编译后，编译器会在.less文件所在的目录生成同名的.css文件。

  七、less代码示例

@light-color : #aa7777;//鲜艳的颜色
@dark-color : gray;//暗淡的颜色

.full-screen//全屏区域
{
   position: fixed;
   width : 100%;
   height : 100%;
}

.super-font//超级字体
{
   color : @light-color;
   font-size : 60px;
   font-weight : bold;
}

.normal-font//正常字体
{
    color : @dark-color;
    font-size : 20px;
    font-weight : normal;
}

.center-text//内容居中
{
    display : table-cell;
    text-align: center;
    vertical-align: middle;
}

.error-block//错误区域
{
    .full-screen;
    .center-text;
    margin-top : 50px;
    .error-content//错误内容
    {
        .super-font;
    }

    .describe//错误描述
    {
        .normal-font;
    }
}