Less CSS簡單歸納

前言

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

什么是Less？

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

為什么用Less?

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

備注：Less 2009年被設(shè)計，第一版是用Ruby編寫的，后來被JavaScript代替。

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

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

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

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

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

// 圖標(biāo)顏色
.top .nav-bar .collspec i{
    color: blue;
}

.......

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

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

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

案例分析

A公司有一個應(yīng)用愛泡泡b,這個愛泡泡b因為功能的更新迭代，想要更換應(yīng)用的皮膚，這個需求在現(xiàn)實中是非常常見的需求。

通常一個成熟的應(yīng)用，如果換皮膚通常是不會去改變布局，因為用戶已經(jīng)習(xí)慣了這個布局風(fēng)格后，
如果貿(mào)然修改布局對于用戶來說可能存在風(fēng)險，那既然布局不該變，那么換皮膚就成為了改變頁面中
元素樣式的工作。

最簡單的方式就是重新寫一套樣式替換原來的樣式，那么這里就出現(xiàn)幾個問題：修改成本大，樣式重用性低。那如果我們在一開始設(shè)計時就讓樣式是動態(tài)的那么是不是就不存在這些問題，而我們換皮膚就變成關(guān)注那些動態(tài)值的改變就可以了。這就是less變量的作用。

less變量使用案例：

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

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

// 設(shè)置左側(cè)背景色
.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;
}

// 設(shè)置菜單字體顏色
.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;
}

// 表格行樣式 奇數(shù)項中區(qū)分黑白
.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;
}

這樣如果要改變風(fēng)格就只需要修改變量的值即可，如果你說布局?jǐn)?shù)值也要改變，那么你就把字體大小，容器大小都做成變量，在調(diào)整時進行對應(yīng)修改即可，同時你可以把這些變量單獨管理在一個文件通過引入的方式在全局使用，這樣你需要關(guān)注的文件就縮小到更小的范圍了。是不是更加方便與項目維護呢？

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