LessCSS簡單歸納

前言

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

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

什么是Less？

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

為什么用Less?

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

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

Less CSS對CSS的擴展，使得其可以創(chuàng)建更加簡潔友好、可重用性高的樣式，那么接下來就手摸手的告訴你怎么使用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的寫法是不是更貼近元素嵌套的方式，這樣維護起來是不是比傳統(tǒng)的方式要好的多。這個特性就是less的嵌套。less嵌套是less的一個語法糖，編譯后生成的css文件依然是我們傳統(tǒng)的寫法，但用了less我們就只關(guān)心維護less文件就可以了，編譯打包后的css文件我們可以不用關(guān)心了，這是不是很棒。less編譯器把less文件轉(zhuǎn)成css文件，這樣讓我們從傳統(tǒng)css中解脫出來了。

案例分析

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

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

最簡單的方式就是重新寫一套樣式替換原來的樣式，那么這里就出現(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導航高度
@top-nav-height: 64px;

// top導航欄背景色
.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;
}

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

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

文章題目：LessCSS簡單歸納
新聞來源：http://www.muchs.cn/article22/ghoccc.html

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

廣告

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

網(wǎng)站優(yōu)化排名