如何建立LESS檔案和如何編譯它-html教學-PHP中文網

如何建立LESS檔案和如何編譯它

WBOY

發布： 2023-09-13 16:29:06

轉載

866 人瀏覽過

概述

一個Leaner Style Sheets (LESS)是一種動態預處理語言，其基本語言是層疊樣式表（CSS）。所有預處理語言都是基本語言的升級版本，因此LESS也具有許多附加功能。 LESS具有變數、父選擇器、混合、巢狀選擇器等功能。在Java中，編譯“.java”檔案的原始程式碼會產生輸出檔案“.class”，同樣地，編譯LESS檔案的“.less 」檔案會產生一個新檔案「.css」作為輸出。

方法

要建立和編譯LESS文件，我們需要遵循以下步驟 -

在您的桌面或命令列（cmd）上開啟終端。使用節點套件管理器（npm）全域安裝學習者樣式表（LESS）環境到您的電腦。

npm install less –g

登入後複製

在您的桌面上建立一個資料夾。現在打開任何文字編輯器，並在其中編寫LESS 程式碼。
將包含「.less」程式碼的檔案儲存為「style.less」。
現在開啟命令列介面（CLI），使用指令 cd 資料夾名稱到達你建立了「style.less」檔案的子資料夾。 “cd”表示更改目錄。
到達less檔案所在的資料夾後，輸入下面的指令來編譯“style.less”，將會產生一個“style.css ”文件。

lessc style.less > style.css

登入後複製

開啟檔案“style.css”，其中的程式碼將會是“style.less”檔案轉換後的css程式碼。

特點

Leaner Style Sheets（LESS）的主要特徵是−

變數− Less語言具有一種功能，可以建立變數並將CSS屬性值儲存在其中。在less檔案中建立變數的前綴是「@」。例如：@width:10rem, @height:10rem, @background: green等。
混合− 此功能提供了不重複編寫樣式程式碼的能力。我們可以將上述建立的樣式作為其他元素的樣式進行重複使用。

例如 −

@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" 編譯器，可以使用下列命令在命令列介面上檢查。

lessc –v

登入後複製

如果您的電腦上安裝了「less」編譯器，您將會獲得帶有其版本號的輸出。

如何建立LESS檔案和如何編譯它

#步驟2 − 在桌面上建立一個名為「LESS」的資料夾。在任何文字編輯器中建立一個HTML文件，並在其中編寫HTML樣板程式碼。

第三步驟 - 在同一個資料夾中建立一個「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 指令到達目的地。

第五步 − 現在使用指令來編譯「style.less」檔案。

lessc style.less > style.css

登入後複製

第六步 - 編譯檔案後，成功建立了「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）非常有用，因為大型專案需要維護一個龐大的「css」檔案。因此，「LESS」提供了變數的功能，這樣可以避免程式碼混亂。與「CSS」相比，維護「LESS」程式碼更容易，例如，如果我們想要更改網站上按鈕的樣式，假設我們需要更改按鈕的邊框半徑和背景顏色，那麼我們只需要在「LESS」檔案的變數中進行兩處更改，而不是在每個CSS元素中進行樣式更改，這樣可以讓開發人員的工作更加輕鬆。

以上是如何建立LESS檔案和如何編譯它的詳細內容。更多資訊請關注PHP中文網其他相關文章！