給CSS加點料——Less（二）

Hello 小夥伴們你們好，今天咱們繼續less的分享，上次的分享看過以後你們有自行進行安裝嗎？！兔妞來收做業了哦～咱們今天就來用用試試吧！仍是像別的語言同樣，咱們今天仍是從變量開始吧！css

♚

變量html

在CSS中不可以定義變量，因此在不少元素互相依賴大小時，假若須要改其中一個大小，咱們就要從頭改到尾，爲了減小這個困擾，less引出了變量的概念，咱們能夠將值的大小定義爲變量，直接在各處引用變量便可，須要更改時，工做量就會大大減少了，同時也會避免由於落下了某幾項而產生的問題。webpack

舉個🌰：好比我想定義一個長度，寬與高都與這個長度有關，咱們即可這樣定義：web

@length: 100px;.item { width: 2*@length; height: @length; background: red;}//是否是清晰不少

♚

嵌套typescript

嵌套也是less的一大特點。想想在使用css的時候，咱們若是想定位到一個元素，就要經過各類選擇器去定位，這就會有兩個問題，要麼起不少id、class名（浪費文采），要麼經過各類子選擇器、後代選擇器等進行定位（浪費體力，還不減肉！），這都不是咱們所但願的。而有了less，咱們則能夠根據html的層級關係對css進行嵌套，根據層級關係進行定位，再經過編譯生成那種咱們看着巨噁心的長長的選擇器。管他呢，咱們本身寫着方便就好了呀！瀏覽器

在嵌套過程當中同html同樣，咱們經過縮進來表現層級關係，從而讓咱們更容易去定位元素，debug啦。在less的嵌套中還有一個&的存在，想一下假若咱們要對某個元素進行操做，而這個操做要影響其父級的樣式，要怎麼辦呢，這時就用到了&。&能夠用來引用父級選擇器。下面咱們就來試試吧～微信

♚

Have a Try！less

下面咱們就來試試吧～
ui

好比兔妞就寫了一個這樣的頁面：
url

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css" /></head><body> <div class="container"> <div class="row"> <div class="item"></div> </div> </div></body></html>

如今會是什麼樣的呢？固然是什麼也看不到的啦，div默認寬度100%，沒有高度呀。咱們下面就用less來寫樣式！

兔妞又寫了一個這樣子的樣式文件：

@length: 100px;
.container { width: 6*@length; height: 3*@length; background: yellow; .row { width: 4*@length; height: 2*@length; background: orange; .item { width: 2*@length; height: @length; background: red; } }}

咱們看目錄是這樣滴：

顯然這是不能用滴！咱們要怎麼辦！編譯呀～上一篇說的的呀～（不過在下那是生活中，咱們不多這樣去編譯，且不說有不少編譯軟件的存在，不少IDE中也是有編譯插件的，或者經過webpack打包的工程咱們是能夠設置爲熱更新的，此爲後話）

lessc style.less style.css

（別忘了換成本身less文件名以及想要轉換的文件名哦～）

噹噹噹當！多出來一個css文件哦！如今瀏覽器是什麼效果呢？

變成了這個效果呢？那麼咱們再來看看解析成的CSS：是否是省去了不少步驟呢～

咱們再來試試&：

@length: 100px;.item { width: 2*@length; height: @length; background: red;}
.container { width: 6*@length; height: 3*@length; background: yellow; .row { width: 4*@length; height: 2*@length; background: orange; .item { width: 2*@length; height: @length; background: red; &:hover{ border: 1px solid #ccc; } } }}

這個編譯出來會是什麼樣呢？指向的就是定義元素位置的父元素，如此處則爲item；

好啦～今天的分享就到這裏啦，有話和兔妞說請到公衆號中留言喲～喜歡兔妞文章就請在看+關注吧，也歡迎你們多多提出寶貴意見與觀點！

本文分享自微信公衆號 - 萌兔it（mengtu_it）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。