最近使用angualr開發一個應用，但是因為這個應用樣式風格經常性的改動，在設計之初和同事討論采用皮膚方式進行設計，便於對應用UI管理.那麽我選擇了Less進行樣式編寫。我的同事因為是一個純後端，所以它對Less不怎麽了解，問我Less是什麽？為啥要用Less?所以我今天就記錄一下，讓更多想了解Less同學能夠通過我的表述獲得一些收獲。

什麽是Less？

LESS是一個CSS預處理器，可以為網站啟用可自定義，可管理和可重用的樣式表。LESS是一種動態樣式表語言，擴展了CSS的功能。 LESS也是跨瀏覽器友好。CSS預處理器是一種腳本語言，可擴展CSS並將其編譯為常規CSS語法，以便可以通過Web瀏覽器讀取。 它提供諸如變量，函數， mixins 和操作等功能，可以構建動態CSS。

為什麽用Less?

Less支持創建更簡潔，跨瀏覽器友好的CSS更快更容易。
Less是用JavaScript設計的，並且創建在 live 中使用，其編譯速度比其他CSS預處理器更快。
Less保持你的代碼以模塊化的方式，這是非常重要的，通過使其可讀性和容易改變。
可以通過使用LESS 變量來實現更快的維護。

備註：Less 2009年被設計，第一版是用Ruby編寫的，後來被JavaScript代替。

Less CSS對CSS的擴展，使得其可以創建更加簡潔友好、可重用性高的樣式，那麽接下來就手摸手的告訴你怎麽使用less讓你的應用樣式管理更加的高效。

Less 的使用好處在於它的那些特性，可以解決像CSS沒法達到的編寫效果。

通常我們使用CSS編寫樣式時，都是id選擇器，類選擇器，但是每次都需要定位某個元素時前面寫一大坨的父級選擇器。如下所示：

.top .nav-bar .collspec a{
    color: red;
}

// 字體顏色
.top .nav-bar .collspec span{
    color: #fff;
}

// 圖標顏色
.top .nav-bar .collspec i{
    color: blue;
}

.......

上面寫法隨著樣式文件的增大，以及元素嵌套層級越來越深時變得越來越難維護。我們來看看less 怎麽寫。

.top{
    .nav-bar{
            .collspec{
                  a{
                        color:red;
                    }
                    span{
                      color:#fff;
                    }
                    i{
                        color:blue;
                    }
            }
    }
}
 

less的寫法是不是更貼近元素嵌套的方式，這樣維護起來是不是比傳統的方式要好的多。這個特性就是less的嵌套。less嵌套是less的一個語法糖，編譯後生成的css文件依然是我們傳統的寫法，但用了less我們就只關心維護less文件就可以了，編譯打包後的css文件我們可以不用關心了，這是不是很棒。less編譯器把less文件轉成css文件，這樣讓我們從傳統css中解脫出來了。

案例分析

A公司有一個應用愛泡泡b,這個愛泡泡b因為功能的更新叠代，想要更換應用的皮膚，這個需求在現實中是非常常見的需求。

通常一個成熟的應用，如果換皮膚通常是不會去改變布局，因為用戶已經習慣了這個布局風格後，
如果貿然修改布局對於用戶來說可能存在風險，那既然布局不該變，那麽換皮膚就成為了改變頁面中
元素樣式的工作。

最簡單的方式就是重新寫一套樣式替換原來的樣式，那麽這裏就出現幾個問題：修改成本大，樣式重用性低。那如果我們在一開始設計時就讓樣式是動態的那麽是不是就不存在這些問題，而我們換皮膚就變成關註那些動態值的改變就可以了。這就是less變量的作用。

less變量使用案例：

// 建議所有項目自定義樣式放在該文件夾下
@green-style:#2ECD99;
// 白色背景定義
@white-back:#fff;
// 白色定義
@white:#fff;
// 灰色定義
@gray: #ddd;
// 左側菜單欄寬度
@sider-bar-width: 200px;
// 左側菜單背景色
@sider-bar-back-color: #2A3E4C;
// top導航高度
@top-nav-height: 64px;

// top導航欄背景色
.header{
  background-color: @white-back;
}

// 設置左側背景色
.aside {
  position: fixed;
  top: 0;
  bottom: 0;
  margin-top: @top-nav-height;
  width: @sider-bar-width;
  background-color: @sider-bar-back-color;
  transition: width 0.2s cubic-bezier(0.25, 0, 0.15, 1), translate 0.2s cubic-bezier(0.25, 0, 0.15, 1);
  z-index: 14;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

// 設置菜單字體顏色
.d-block .ng-star-inserted{
  color: #878787 !important;
}

// 未選中菜單樣式
.ad-nav__item .ng-star-inserted span{
  color: @white;
}

// 選中菜單項樣式
.ad-nav__selected {
  border: 0px;
  background-color: @sider-bar-back-color;
}
// 選中字體顏色
.ad-nav__selected .ng-star-inserted span{
  color: @green-style !important;
}

// 刷新按鈕樣式
.button-refresh{
  background: @green-style;
  border-color: @green-style;
  font-size: 18px;
}

// 表格菜單裏操作按鈕
i.i-button-block {
  color: @green-style;
}

// 表格行樣式 奇數項中區分黑白
.ant-table-body  tr:nth-child(4n-1) {background-color: @white;}
.ant-table-body  tr:nth-child(4n+1)  {background-color: @gray;}

// 搜索組件樣式
.sf-btns .ant-form-item-control button[type=‘submit‘] {
  background-color: @green-style;
  border-color: @green-style;
}

//表格pagination樣式
.ant-pagination-item-active:focus, .ant-pagination-item-active:hover {
  border-color: @green-style;
}

// 選中樣式
.ant-pagination-item-active {
  border-color: @green-style;
  font-weight: 500;
}

// 選中字體樣式
.ant-pagination-item:focus a, .ant-pagination-item:hover a, .ant-pagination-item-active a {
  color: @green-style;
}

// 獲取焦點樣式
.ant-pagination-item:focus, .ant-pagination-item:hover {
  transition: all .3s;
  border-color: @green-style;
}

// 前一頁，後一頁樣式
.ant-pagination-prev:focus .ant-pagination-item-link,
.ant-pagination-next:focus .ant-pagination-item-link,
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  border-color: @green-style;
  color: @green-style;
}

這樣如果要改變風格就只需要修改變量的值即可，如果你說布局數值也要改變，那麽你就把字體大小，容器大小都做成變量，在調整時進行對應修改即可，同時你可以把這些變量單獨管理在一個文件通過引入的方式在全局使用，這樣你需要關註的文件就縮小到更小的範圍了。是不是更加方便與項目維護呢？

我這裏只是簡單的說明一下他的好處，它的好用特性遠不止這些，有興趣的朋友可以進入官網查看詳細的文檔，我就不再這裏過多的寫那些語法內容了。希望對你有幫助。

Less CSS簡單歸納