LESS 中的 Escape 有什麼用？

在 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：在媒體查詢中使用變數

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

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

在輸出中，使用者可以觀察到下面兩個範例的輸出是相同的，這會導致媒體查詢以最大寬度為 600 像素的螢幕為目標。

@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：在變數較少的值中轉義特殊字元

在下面的範例中，我們使用波形符號和雙引號語法 ~"..." 將變數 @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 程式碼。

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

以上是LESS 中的 Escape 有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！