LESS即学即用
前言
我們大家都知道HTML和CSS不屬于編程語(yǔ)言而是屬于標(biāo)記語(yǔ)言,所以很難像JS一樣定義變量、編寫方法、實(shí)現(xiàn)模塊化開(kāi)發(fā)等。而目前的CSS編寫模式中,都是定義一些公共的樣式類名,哪一塊的HTML需要這個(gè)樣式,就去增加對(duì)應(yīng)的樣式類名,所以我們經(jīng)常看到一個(gè)標(biāo)簽上存在很多樣式類名,在這種模式中我們要時(shí)常關(guān)注CSS的優(yōu)先級(jí),避免樣式的重疊覆蓋...
為了解決CSS的這一困境,CSS預(yù)處理預(yù)編譯的思想脫穎而出,比較具有代表性的有LESS、SASS、Stylus。它們?cè)趥鹘y(tǒng)的CSS基礎(chǔ)上增加了大量的新的語(yǔ)法,編寫方式,常用的函數(shù)等,可以讓我們的CSS像JS一樣成為一門編程語(yǔ)言。本文主要介紹LESS的語(yǔ)法和使用。
但愿文章對(duì)你有些許幫助,歡迎在我的GitHub博客點(diǎn)贊和關(guān)注,感激不盡!
一、LESS的編譯
編寫完成的LESS代碼是不能直接在瀏覽器中運(yùn)行的,需要編譯成正常的CSS代碼。那么我們首先就來(lái)學(xué)習(xí)一下常用的LESS編譯方式。
1.在瀏覽器中調(diào)用LESS.JS
LESS只支持在現(xiàn)代瀏覽器中運(yùn)行(最新版本的Chrome, Firefox, Safari 和 IE)。我們不建議在生產(chǎn)環(huán)境中使用LESS客戶端,因?yàn)樵趯ESS編譯成CSS的時(shí)候,用戶會(huì)看到加載延遲的現(xiàn)象,即便在瀏覽器中有不足一秒的加載延遲,但也會(huì)降低性能。
首先引入我們?cè)O(shè)置樣式的LESS文件,注意:這里的rel='stylesheet/less'
<link type="text/css" rel="stylesheet/less" href="1.less"/> 復(fù)制代碼然后引入less.js文件
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script> 復(fù)制代碼瀏覽器中調(diào)用有個(gè)好處:可以開(kāi)啟監(jiān)視模式,只要我們的LESS改變,在一定時(shí)間內(nèi),瀏覽器就會(huì)重新的編譯,我們可以看到想要的效果。具體操作如下:
<script charset="utf-8" type="text/javascript">//->在引入LESS之前設(shè)置一個(gè)全局的變量less,配置一些參數(shù)值(根據(jù)情況自行選擇需要配置的項(xiàng))var less = {//->env:設(shè)置運(yùn)行的環(huán)境(生產(chǎn)模式還是開(kāi)發(fā)模式)//production:編譯后的CSS緩存到本地localStorage中//development:沒(méi)有把編譯后的CSS緩存到本地,在URL不是標(biāo)準(zhǔn)的格式下(例如:file://...),自動(dòng)設(shè)置為developmentenv: "development",//->poll:在監(jiān)視模式下,每?jī)纱握?qǐng)求之間的時(shí)間間隔(ms)poll:500}</script> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script><script charset="utf-8" type="text/javascript">//->啟用監(jiān)視模式(env必須要設(shè)置成development)less.watch();</script> 復(fù)制代碼需要特別注意的是,由于瀏覽器端使用時(shí)是使用ajax來(lái)拉取.less文件,因此直接在本機(jī)文件系統(tǒng)打開(kāi)(即地址是file://開(kāi)頭)或者是有跨域的情況下會(huì)拉取不到.less文件,導(dǎo)致樣式無(wú)法生效。所以一般less做css預(yù)處理,很少采用引用less的方式,一般是把less編譯成css之后,引用生成的css文件。 // index.html文件 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>less</title><link type="text/css" rel="stylesheet/less" href="css/styles.less"> </head> <body><header><p>Hello World!</p></header> <script src="./less.min.js" type="text/javascript"></script> </body> </html> 復(fù)制代碼// styles.less文件 @blue:#5B83AD; @size:50px; header {color: @blue;font-size: @size; } 復(fù)制代碼如果直接引入less文件,便會(huì)出現(xiàn)如下錯(cuò)誤:
可以嘗試用一個(gè)簡(jiǎn)單的web server啟動(dòng)網(wǎng)站就能解決,譬如lite-server npm install -g lite-server lite-server //to run 復(fù)制代碼2、使用NODE命令編譯LESS(單個(gè)文件)
這種方式是目前項(xiàng)目中最常用的方式,適用于項(xiàng)目的生產(chǎn)環(huán)境,它是把我們的LESS文件編譯成CSS文件,我們項(xiàng)目中直接的引入CSS文件即可,基本步驟:安裝->編譯/壓縮編譯->或者使用NODE代碼實(shí)現(xiàn)批量編譯等
把LESS模塊安裝到全局NODE環(huán)境中
npm install less -g 復(fù)制代碼使用命令進(jìn)行編譯
//->把styles.less文件編譯成styles.css文件(如果沒(méi)有這個(gè)CSS文件自己會(huì)創(chuàng)建)lessc styles.less styles.css//->編譯完成的CSS文件是經(jīng)過(guò)壓縮的lessc styles.less styles.min.css -x或者--compress 復(fù)制代碼經(jīng)過(guò)node命令編譯代碼前后對(duì)比:
// styles.less文件(編譯前) @blue:#5B83AD; @size:50px; header {color: @blue;font-size: @size; } 復(fù)制代碼// styles.css文件(編譯后) header {color: #5B83AD;font-size: 50px; } 復(fù)制代碼3、在NODE環(huán)境中編寫批量編譯的代碼
我們?cè)谏鲜鲇肗ODE命令編譯的時(shí)候,一次只能編譯一個(gè)文件,這樣,如果頁(yè)面中有多個(gè)LESS,每一次編譯都是比較耗費(fèi)時(shí)間的,所以我們結(jié)合NODE的FS文件讀寫操作,可以寫一套批量編譯的代碼。
//->定義編譯文件目錄和目標(biāo)導(dǎo)出目錄var dirPath = "./less/", tarPath = "./css/";//->導(dǎo)入NODE中需要使用的模塊var fs = require("fs"),less = require("less");//->讀取dirPath中的所有文件,檢查文件的類型,只有LESS文件我們才進(jìn)行存儲(chǔ)var ary = [],files = fs.readdirSync(dirPath);files.forEach(function (file, index) {/\.(LESS)/i.test(file) ? ary.push(file) : null;});//->把目錄下的所有文件進(jìn)行編譯,把編譯完成的結(jié)果保存在指定的目錄中ary.forEach(function (file) {var newFile = file.replace(".less", ".css"),conFile = fs.readFileSync(dirPath + file, "utf-8");less.render(conFile, {compress: true}, function (error, output) {fs.writeFileSync(tarPath + newFile, output.css, "utf-8");});}); 復(fù)制代碼4、使用工具編譯LESS
目前常用的編譯工具有:Koala(據(jù)說(shuō)目前最流行的)、在線編譯(tool.oschina.net/less)、SimpLESS等。本篇文章不做過(guò)多的說(shuō)明。
二、LESS的語(yǔ)法
LESS的基礎(chǔ)語(yǔ)法基本上分為以下幾個(gè)方面:變量、混合(Mixins)、嵌套規(guī)則、運(yùn)算、函數(shù)、作用域等。
1.變量
和JS中的變量一樣,只是LESS的變量定義不是使用VAR而是使用@。
//->LESS代碼@link-color: #428bca;@link-color-hover: darken(@link-color, 10%);a {color: @link-color;&:hover {color: @link-color-hover;}}//->編譯為CSS的結(jié)果a {color: #428bca;}a:hover {color: #3071a9;} 復(fù)制代碼除了上述用變量存儲(chǔ)公用的屬性值,我們還可以用變量存儲(chǔ)公用的URL、選擇器等等
//->LESS代碼.@{selector} {width: 100px;height: 100px;@{property}: #000;background: url("@{bgImg}/test.png");}@selector: box;@bgImg: "../img";@property: color; 復(fù)制代碼2.混合(Mixins)
① 基本使用
混合可以將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中,從而簡(jiǎn)單實(shí)現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用,就像使用函數(shù)一樣。
//->LESS代碼.public {width: 100px;height: 100px;}nav ul {.public;list-style: none;}//->編譯為CSS的結(jié)果.public {width: 100px;height: 100px;}nav ul {width: 100px;height: 100px;list-style: none;} 復(fù)制代碼上述的代碼,nav ul是把public中設(shè)定的樣式屬性值copy了一份到自己的樣式中。如果你想在編譯完成的結(jié)果中不輸出public這個(gè)樣式的結(jié)果,只需要按照下述的代碼編寫即可:
//->LESS代碼.public() {//->在選擇器后面加上()就可以不編譯這個(gè)樣式了width: 100px;height: 100px;}nav ul {.public;//如果public有子孫元素的樣式,同樣也會(huì)被復(fù)制過(guò)來(lái)list-style: none;}//->編譯為CSS的結(jié)果nav ul {width: 100px;height: 100px;list-style: none;} 復(fù)制代碼② extend
雖然在上述的案例中,nav ul把public中的樣式繼承了過(guò)來(lái),但是原理卻是把代碼copy一份過(guò)來(lái),這樣編譯后的CSS中依然會(huì)存留大量的冗余CSS代碼,為了避免這一點(diǎn),我們可以使用extend偽類來(lái)實(shí)現(xiàn)樣式的繼承使用。和原來(lái)的選擇器共用一套樣式,但要保證原來(lái)的選擇器不加括號(hào)。
//->LESS代碼.public {width: 100px;height: 100px;}nav ul {&:extend(.public);list-style: none;}//->編譯為CSS的結(jié)果.public, nav ul {width: 100px;height: 100px;}nav ul {list-style: none;} 復(fù)制代碼3.嵌套規(guī)則
我們可以在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承,這樣很大程度減少了代碼量,并且代碼看起來(lái)更加的清晰。
//->LESS代碼 #header {color: black;.navigation {font-size: 12px;}.logo {width: 300px;&:hover { text-decoration: none }} } 復(fù)制代碼//->編譯為CSS的結(jié)果 #header { color: black; } #header .navigation {font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover {text-decoration: none; } 復(fù)制代碼4.函數(shù) & 運(yùn)算
運(yùn)算提供了加,減,乘,除操作;我們可以做屬性值和顏色的運(yùn)算,這樣就可以實(shí)現(xiàn)屬性值之間的復(fù)雜關(guān)系。LESS中的函數(shù)一一映射了JavaScript代碼,如果你愿意的話可以操作屬性值。
任何數(shù)字、顏色或者變量都可以參與運(yùn)算. 來(lái)看一組例子:
@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; 復(fù)制代碼LESS 提供了一系列的顏色運(yùn)算函數(shù). 顏色會(huì)先被轉(zhuǎn)化成 HSL 色彩空間, 然后在通道級(jí)別操作:
lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color 復(fù)制代碼LESS提供了一組方便的數(shù)學(xué)函數(shù),你可以使用它們處理一些數(shù)字類型的值:
round(1.67); // returns `2` ceil(2.4); // returns `3` floor(2.6); // returns `2` 復(fù)制代碼5.命名空間和作用域
LESS 中的作用域跟其他編程語(yǔ)言非常類似,首先會(huì)從本地查找變量或者混合模塊,如果沒(méi)找到的話會(huì)去父級(jí)作用域中查找,直到找到為止。
@var: red; #page {@var: white;#header {color: @var; // white} } #footer {color: @var; // red } 復(fù)制代碼參考文章
LESS學(xué)習(xí):了解LESS和編譯LESS
LESS學(xué)習(xí):LESS的基礎(chǔ)語(yǔ)法
LESS一種動(dòng)態(tài)樣式語(yǔ)言
總結(jié)
- 上一篇: 运维技术之一、supervisorctl
- 下一篇: linux搭建gitlab