資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何建立LESS檔案以及如何編譯它
概述
LESS (Leaner Style Sheets) 是一種動態預處理器語言，其基礎語言是層疊樣式表 (CSS)。所有預處理器語言都是基礎語言的升級版本，因此 LESS 也具有許多額外的功能。LESS 具有變數、父選擇器、mixin、巢狀選擇器等功能。在 Java 中，編譯“.java”檔案會生成“.class”檔案作為輸出，與 Java 相同，LESS 檔案編譯“.less”檔案會生成“.css”檔案作為輸出。
方法
要建立和編譯 LESS 檔案，我們需要遵循以下步驟：
在桌面上開啟終端或命令列 (cmd)。使用節點包管理器 (npm) 將 LESS 環境全域性安裝到您的計算機中。
npm install less –g
在桌面上建立一個資料夾。現在開啟任何文字編輯器並在其中編寫 LESS 程式碼。
將包含“.less”程式碼的檔案儲存為“style.less”。
現在開啟命令列介面 (CLI)，使用命令 cd folderName 進入您建立“style.less”檔案的子資料夾。“cd”表示更改目錄。
到達 less 檔案的資料夾後，鍵入以下命令來編譯“style.less”，這將生成“style.css”檔案。
lessc style.less > style.css
開啟“style.css”檔案，其中的程式碼將是“style.less”檔案的轉換後的 CSS 程式碼。
功能
LESS (Leaner Style Sheets) 的主要功能包括：
變數 - LESS 語言具有建立變數並存儲 CSS 屬性值的功能。在 LESS 檔案中建立變數的常用字首是“@”。例如：@width:10rem，@height:10rem，@background: green 等。
Mixin - 此功能可避免重複編寫樣式程式碼。我們可以將上面建立的樣式重複用作其他元素的樣式。
例如：
@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
}
演算法
步驟 1 - 在開始編寫程式碼之前，請使用上述方法安裝 less 編譯器。如果您已經安裝了“less”編譯器，則可以使用以下命令在 CLI 上進行檢查。
lessc –v
如果您的計算機上安裝了“less”編譯器，您將看到包含其版本的輸出。
步驟 2 - 在桌面上建立一個名為“LESS”的資料夾。在任何文字編輯器中建立一個 HTML 檔案，並在其中編寫 HTML 基本程式碼。
步驟 3 - 在同一個資料夾中建立一個“style.less”檔案，並編寫用於設定網頁樣式的程式碼。
@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;
}
步驟 4 - 現在使用 CLI 進入我們建立的桌面子資料夾。使用 cd desktop、cd less 命令到達目標位置。
步驟 5 - 現在使用命令編譯“style.less”檔案。
lessc style.less > style.css
步驟 6 - 編譯檔案後，“style.css”檔案將成功建立。現在網頁已準備好使用正確的樣式在瀏覽器中載入。
示例
在這個例子中，我們將看到 LESS 檔案未編譯時以及編譯後的網頁外觀。為此，我們將在資料夾中建立一個連結了 CSS 檔案的網頁和一個 LESS 檔案。
<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>
下圖顯示了編譯“style.less”後的輸出，當網頁構建並連結到 CSS 時，它顯示的頁面僅顯示未設定樣式的 HTML 部分。編譯“style.less”檔案後，檔案中編寫的樣式將被編譯，並建立一個 style.css 檔案，該檔案顯示以下帶有正確樣式的網頁輸出。
結論
當我們需要構建大型專案時，LESS (Leaner Style Sheets) 在程式碼中非常有用，因為大型專案需要維護大型 CSS 檔案。“LESS”提供了變數功能，這不會使程式碼混亂。維護“LESS”程式碼比維護“CSS”程式碼更容易，例如，如果我們要更改網站上按鈕的樣式，假設我們必須更改按鈕的邊框半徑和背景顏色，那麼我們不必在 CSS 的每個元素中更改樣式，而只需要在“LESS”檔案變數中進行兩次更改，這使得開發人員的工作更容易。
608 次瀏覽
