LESS 中轉義的用途是什麼？

---

在 LESS 中，“轉義”允許我們使用任意字串作為屬性或變數值。有時，我們可能會在 LESS 程式碼中使用特殊字元或符號，這些字元或符號在編譯程式碼時可能會導致問題。轉義是一種技術，它透過將這些特殊字元和符號包含在一個特殊的容器中來幫助防止此類問題。

在本教程中，我們將探討為什麼 LESS 需要轉義以及它是如何工作的。

語法

使用者可以按照以下語法在 LESS 中使用“轉義”。

@property_name: ~"anything";

在上文語法中，我們在需要轉義的字串之前使用了波浪號 (~) 符號。波浪號 (~) 告訴 LESS 將字串按原樣處理，無需對其進行任何更改，只是對字串內的任何變數進行插值。

示例 1：轉義 CSS 屬性值中的特殊字元

在下面的示例中，我們使用了 ~ 運算子來轉義 @my-bg 中 URL 中的單引號。

在輸出中，使用者可以看到編譯後的 CSS 中正確的 URL。如果不轉義，URL 周圍的引號會導致編譯錯誤。

@my-bg: ~"url('https://example.com/image.jpg')";
.background {
   background-image: @my-bg;
}

輸出

.background {
   background-image: url('https://example.com/image.jpg');
}

示例 2：在媒體查詢中使用變數

在下面的示例中，我們定義了一個變數 @viewport-max-width，其值為 600px。我們使用了轉義來確保 @viewport-max-width 的值按原樣傳遞到 CSS 程式碼中，不會被 LESS 處理。

注意：請注意，從 LESS 3.5 開始，在許多使用變數的媒體查詢情況下，不需要轉義。在這種情況下，我們可以使用 @{} 語法簡單地引用變數。

在輸出中，使用者可以看到以下兩個示例的輸出相同，這導致媒體查詢目標螢幕的最大寬度為 600px。

@viewport-max-width: 600px;
@media screen and (max-width: ~"@{viewport-max-width}") {
   .my-class {
      font-size: 1.2rem;
   }
}
In LESS 3.5+, the above example can be written without the need for escaping as follows: 
@viewport-max-width: 600px; 
@media screen and (max-width: @{viewport-max-width}) { 
   .my-class { 
      font-size: 1.2rem; 
   } 
}

輸出

@media screen and (max-width: 600px) {
   .my-class {
      font-size: 1.2rem;
   }
}

示例 3：轉義 LESS 變數值中的特殊字元

在下面的示例中，我們使用波浪號和雙引號語法 ~"..." 定義了一個變數 @my-string 作為任意字串。該字串包含一對雙引號，這在 LESS 編譯時通常會導致問題。

在輸出中，使用者可以看到 @my-string 的值輸出為 This is my "quoted" string，由於轉義，沒有任何問題。

@my-string: ~"This is my "quoted" string";
.my-class {
   content: @my-string;
}

輸出

.my-class {
   content: This is my "quoted" string;
}

示例 4：將 LESS 函式與轉義值一起使用

在下面的示例中，我們定義了一個變數 @my-color，其值為表示 RGBA 顏色的任意字串。該值使用波浪號後跟雙引號進行轉義。

然後，我們使用 LESS 函式 darken() 將顏色的深 10% 陰影應用為 .my-class 元素的背景顏色。該函式能夠理解轉義的字串值並相應地應用計算。

在輸出中，使用者可以看到原始顏色 (rgba(255, 0, 0, 0.5)) 已被加深 10% 至新顏色 (rgba(204, 0, 0, 0.5))，並應用為 .my-class 元素的背景顏色。

@my-color: ~"rgba(255, 0, 0, 0.5)";
.my-class {
   background-color: darken(@my-color, 10%);
}

輸出

.my-class {
   background-color: rgba(204, 0, 0, 0.5);
}

使用者學習瞭如何在 LESS 中使用轉義。基本上，LESS 中的轉義是一項重要的技術，它允許開發人員編寫更高效且更易維護的 CSS 程式碼。

總的來說，透過使用轉義語法和函式，開發人員可以確保特殊字元和保留關鍵字被正確編碼，從而防止編譯錯誤並確保最終輸出正確。