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;
    }
}