概述?
一個(gè)Leaner Style Sheets (LESS)是一種動(dòng)態(tài)預(yù)處理語言，其基本語言是層疊樣式表（CSS）。所有預(yù)處理語言都是基本語言的升級(jí)版本，因此LESS也具有許多附加功能。LESS具有變量、父選擇器、混合、嵌套選擇器等功能。在Java中，編譯“.java”文件的源代碼會(huì)生成輸出文件“.class”，同樣地，編譯LESS文件的“.less”文件會(huì)生成一個(gè)新文件“.css”作為輸出。
方法
要?jiǎng)?chuàng)建和編譯LESS文件，我們需要遵循以下步驟 –
在您的桌面或命令行（cmd）上打開終端。使用節(jié)點(diǎn)包管理器（npm）全局安裝學(xué)習(xí)者樣式表（LESS）環(huán)境到您的計(jì)算機(jī)中。
npm install less –g
登錄后復(fù)制
在您的桌面上創(chuàng)建一個(gè)文件夾。現(xiàn)在打開任何文本編輯器，并在其中編寫LESS 代碼。
將包含“.less”代碼的文件保存為“style.less”。
現(xiàn)在打開命令行界面（CLI），使用命令 cd 文件夾名稱 到達(dá)你創(chuàng)建了“style.less”文件的子文件夾。 “cd”表示更改目錄。
到達(dá)less文件所在的文件夾后，輸入下面的命令來編譯“style.less”，將會(huì)生成一個(gè)“style.css”文件。
lessc style.less > style.css
登錄后復(fù)制登錄后復(fù)制
打開文件“style.css”，其中的代碼將是“style.less”文件轉(zhuǎn)換后的css代碼。
特點(diǎn)
Leaner Style Sheets（LESS）的主要特點(diǎn)是?
變量? Less語言具有一種功能，可以創(chuàng)建變量并將CSS屬性值存儲(chǔ)在其中。在less文件中創(chuàng)建變量的前綴是“@”。例如：@width:10rem, @height:10rem, @background: green等。
混合? 此功能提供了不重復(fù)編寫樣式代碼的能力。我們可以將上述創(chuàng)建的樣式作為其他元素的樣式進(jìn)行重用。
例如 ?
@width:10px; //variables created
@height:@width+10px; //variables created
.box{ //box class is styled using the above variable
width:@width;
height:@height;
}
.profile{
.box(); //.box() is used as mixins to inherit the property of box in profile
}
登錄后復(fù)制
算法
步驟 1 – 在開始編寫代碼之前，使用上述提供的方法安裝 less 編譯器。如果您已經(jīng)安裝了 “less” 編譯器，可以使用以下命令在命令行界面上檢查。
lessc –v
登錄后復(fù)制
如果您的計(jì)算機(jī)上安裝了“less”編譯器，您將會(huì)獲得帶有其版本號(hào)的輸出。
步驟2 ? 在桌面上創(chuàng)建一個(gè)名為“LESS”的文件夾。在任何文本編輯器中創(chuàng)建一個(gè)HTML文件，并在其中編寫HTML樣板代碼。
第三步 – 在同一個(gè)文件夾中創(chuàng)建一個(gè)“style.less”文件，并編寫用于樣式化網(wǎng)頁的代碼。
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
登錄后復(fù)制
步驟 4 ? 現(xiàn)在使用命令行界面（CLI）進(jìn)入子文件夾，我們已經(jīng)在桌面上創(chuàng)建了這個(gè)文件夾。使用 cd desktop，cd less 命令到達(dá)目的地。
第五步 ? 現(xiàn)在使用命令來編譯“style.less”文件。
lessc style.less > style.css
登錄后復(fù)制登錄后復(fù)制
第六步 – 編譯文件后，成功創(chuàng)建了“style.css”文件。現(xiàn)在網(wǎng)頁已經(jīng)準(zhǔn)備好以適當(dāng)?shù)臉邮郊虞d到瀏覽器中。
示例
在這個(gè)例子中，我們將看到當(dāng)less文件沒有編譯時(shí)網(wǎng)頁的樣子，以及編譯后的樣子。為了實(shí)現(xiàn)這一點(diǎn)，我們將創(chuàng)建一個(gè)鏈接了css文件和一個(gè)文件夾中的”less”文件的網(wǎng)頁。
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>LESS Example</title>
<style>
@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
background-color: @background;
color: @color;
text-align: @textAlign;
padding: 1rem;
border-radius: 5px;
}
span{
text-decoration: @textDecoration;
}
h1 {
background-color: green;
color: white;
text-align: center;
padding: 1rem;
border-radius: 5px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>LESS</h1>
<h1>LESS stands for <span>(Leaner Style Sheets)</span></h1>
</body>
</html>
登錄后復(fù)制
下面給出的圖像顯示了在編譯“style.less”時(shí)的輸出，當(dāng)網(wǎng)頁構(gòu)建并與css鏈接時(shí)，它顯示的是只顯示HTML部分而沒有樣式的頁面。在編譯“style.less”文件后，文件中編寫的樣式被編譯，并創(chuàng)建了一個(gè)style.css文件，它顯示了以下給出的具有適當(dāng)樣式的網(wǎng)頁輸出。
結(jié)論
在構(gòu)建大型項(xiàng)目時(shí)，精簡樣式表（LESS）非常有用，因?yàn)榇笮晚?xiàng)目需要維護(hù)一個(gè)龐大的“css”文件。因此，“LESS”提供了變量的功能，這樣可以避免代碼混亂。與“CSS”相比，維護(hù)“LESS”代碼更容易，例如，如果我們想要更改網(wǎng)站上按鈕的樣式，假設(shè)我們需要更改按鈕的邊框半徑和背景顏色，那么我們只需要在“LESS”文件的變量中進(jìn)行兩處更改，而不是在每個(gè)CSS元素中進(jìn)行樣式更改，這樣可以讓開發(fā)人員的工作更加輕松。
以上就是如何創(chuàng)建LESS文件和如何編譯它的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
