當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

LESS即学即用

發(fā)布時(shí)間：2025/3/20 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 LESS即学即用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

我們大家都知道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'

然后引入less.js文件

瀏覽器中調(diào)用有個(gè)好處:可以開(kāi)啟監(jiān)視模式,只要我們的LESS改變，在一定時(shí)間內(nèi)，瀏覽器就會(huì)重新的編譯，我們可以看到想要的效果。具體操作如下:

需要特別注意的是，由于瀏覽器端使用時(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é)

以上是生活随笔為你收集整理的LESS即学即用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

即用

上一篇：运维技术之一、supervisorctl
下一篇： linux搭建gitlab