前言

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

創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站、網(wǎng)站重做改版、西藏網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開(kāi)發(fā)、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為西藏等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

什么是Less？

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

為什么用Less?

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

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

---

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

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

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

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

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

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

.......

上面寫(xiě)法隨著樣式文件的增大，以及元素嵌套層級(jí)越來(lái)越深時(shí)變得越來(lái)越難維護(hù)。我們來(lái)看看less 怎么寫(xiě)。

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

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

案例分析

A公司有一個(gè)應(yīng)用愛(ài)泡泡b,這個(gè)愛(ài)泡泡b因?yàn)楣δ艿母碌?，想要更換應(yīng)用的皮膚，這個(gè)需求在現(xiàn)實(shí)中是非常常見(jiàn)的需求。

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

最簡(jiǎn)單的方式就是重新寫(xiě)一套樣式替換原來(lái)的樣式，那么這里就出現(xiàn)幾個(gè)問(wèn)題：修改成本大，樣式重用性低。那如果我們?cè)谝婚_(kāi)始設(shè)計(jì)時(shí)就讓樣式是動(dòng)態(tài)的那么是不是就不存在這些問(wèn)題，而我們換皮膚就變成關(guān)注那些動(dòng)態(tài)值的改變就可以了。這就是less變量的作用。

less變量使用案例：

// 建議所有項(xiàng)目自定義樣式放在該文件夾下
@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;
}

// 選中菜單項(xiàng)樣式
.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ù)項(xiàng)中區(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;
}

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

// 前一頁(yè)，后一頁(yè)樣式
.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)格就只需要修改變量的值即可，如果你說(shuō)布局?jǐn)?shù)值也要改變，那么你就把字體大小，容器大小都做成變量，在調(diào)整時(shí)進(jìn)行對(duì)應(yīng)修改即可，同時(shí)你可以把這些變量單獨(dú)管理在一個(gè)文件通過(guò)引入的方式在全局使用，這樣你需要關(guān)注的文件就縮小到更小的范圍了。是不是更加方便與項(xiàng)目維護(hù)呢？

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

文章題目：LessCSS簡(jiǎn)單歸納
新聞來(lái)源：http://chinadenli.net/article22/ghoccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、企業(yè)建站、網(wǎng)站改版、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)