資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 LESS 中建立迴圈結構
概述
迴圈使我們的程式碼簡潔，並幫助多次執行相同的程式碼行。這使得程式碼無需多次編寫相同的程式碼行。因此，要對多個容器和物件使用相同的樣式，可以透過編寫一行程式碼並多次重複相同的樣式屬性來完成。為了解決這個問題，Leaner Style Sheets (LESS) 提供了迴圈功能，透過使用該功能，我們可以使程式碼的可讀性更強，並節省開發人員編寫大量樣式屬性程式碼的時間。
語法
在 Leaner Style Sheets (LESS) 中使用迴圈的語法如下：
.functionName (@variableName) when (terminationCondition) { .selector{ font-size : (18px * @variable); color:green } .functionName(decrement/increment); }
函式名 - 函式名可以根據開發人員的選擇自定義。
變數名 - 變數名也可以由開發人員編寫。LESS 預處理器中的變數名在其前面帶有“@”字首。例如：@name、@width、@height、@border 等。
選擇器 - 迴圈內的選擇器是類、id 和標籤，這些標籤將使用迴圈動態設定樣式。
增量/減量 - 這些是條件屬性，取決於開發人員想要執行任務的情況。
終止條件 - 這是迴圈停止的條件。假設終止條件設定為變數大於 0，並且變數遞減，因此當變數值等於或小於 0 時，迴圈將終止。
演算法
步驟 1 - 在任何文字編輯器中建立一個 HTML 基本結構。新增一些帶有類名的元素。
步驟 2 - 使用連結“style.css”將樣式錶鏈接到 HTML 頁面。
<link rel="stylesheet" href="style.css">
步驟 3 - 在同一資料夾中建立一個“style.less”檔案，並使用上面給出的語法建立迴圈，其中包含使用者定義的函式名和變數名。
步驟 4 - 新增終止條件，因為當變數值小於 0 時迴圈終止。
步驟 5 - 現在繼承要反映樣式的樣式元件。如果類名相同，但數字不同，則可以使用當前變數值並將其與類名連線起來。
步驟 6 - 遞減變數的當前值。使迴圈達到終止條件。如果不執行此步驟，則迴圈將採用當前值，並且只會反映一次更改。
fsize (@variable) when (@variable > 0) {
.space@{variable} {
font-size : (18px * @variable);
color:green
}
.fsize(@variable - 1);
}
步驟 7 - 迴圈結束時，呼叫函式並向其中傳遞值。
.fsize(3);
步驟 8 - 開啟終端並使用“cd”命令（更改目錄）到達其中的當前資料夾。
步驟 9 - 使用以下命令編譯 less 檔案。
lessc style.less > style.css
步驟 10 - 現在 LESS 檔案已編譯並轉換為“style.css”。
步驟 11 - 可以在瀏覽器上檢視輸出。
示例
在給定的示例中，我們建立了一個簡單的 HTML 頁面，其中包含一些 HTML div 標籤。在 style.less 檔案中，我們建立了一個迴圈，透過該迴圈，我們迭代了反映特定選擇選擇器（即類名）的樣式屬性。在下面給出的 style.less 程式碼中，考慮了 fsize() 函式，其中變數作為引數傳遞。在迴圈中，我們使用了遞迴屬性，該屬性在變數值小於或等於 0 時終止。
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>LESS Loops</title>
<style>
.space3 {
font-size: 54px;
color: green;
}
.space2 {
font-size: 36px;
color: green;
}
.space1 {
font-size: 18px;
color: green;
}
.fsize (@variable) when (@variable > 0) {
.space@{variable} {
font-size : (18px * @variable);
color:green
}
.fsize(@variable - 1);
}
.fsize(3);
</style>
</head>
<body>
<div class="space1">tutorialspoint.com</div>
<div class="space2">tutorialspoint.com</div>
<div class="space3">tutorialspoint.com</div>
</body>
</html>
為了將樣式反映到主頁面，我們必須將 style.less 轉換為樣式表到 style.css，因為 style.css 表格與索引頁面連結。要轉換它，我們應該有一個 less 編譯器，它將給定的 less 檔案編譯成 css。現在開啟終端併到達 style.less 資料夾以使用下面給出的 less 編譯器命令。
使用上述命令，less 檔案被編譯並轉換為層疊樣式表 (CSS)，從而更改頁面的樣式。下面的 style.css 程式碼是上面編譯的 less 檔案的結果，其中包含迴圈。
下圖包含上述示例的輸出，其中包含三個帶有文字的 div 容器。因此，當在 less 檔案中呼叫函式時，迴圈開始並使用值 3 初始化變數，當樣式屬性 style 獲取值時，它會根據相同的顏色名稱相應地計算和更改字型大小。然後變數的值遞減 1，然後變數的值設定為 2，並且相同的過程持續進行，直到變數的值小於或等於 0。當變數的值等於 0 時，迴圈終止，並且當使用 lessc 編譯器編譯時，它會將更改反映到 css 頁面，從而將樣式反映到主索引頁面。
結論
當代碼的某些部分中變數名稱錯誤時，編譯程式碼時會報錯。當我們在迴圈外部呼叫函式時，LESS 中的功能稱為 mixin。這是 LESS 的一個很棒的功能，透過它我們可以將一個元素的屬性與另一個元素一起使用。要執行上述迴圈，必須對迴圈的工作原理以及遞迴的理解有基本的瞭解。
112 次檢視
