在LESS中,「Extend」是一種功能,允許我們從一個選擇器繼承樣式到另一個選擇器。當我們在一個選擇器中使用「extend」時,它會將該選擇器的樣式與與之相符的任何其他選擇器合併。
讓我們透過下面的例子來理解它。這樣你就可以更清楚地了解在LESS中使用"extend"特性的用法。
使用者可以依照下列語法在LESS中使用「extend」功能。
.selector1:extend(.selector2) {} //The above block does the same thing as the below .selector1{ &:extend(.selector2); }
在上述語法中,".selector1"是將繼承樣式的選擇器,而".selector2"是它將從中繼承的選擇器。在使用"extend"時,我們也可以使用"&"符號來建立巢狀選擇器。
以下是我們可以使用LESS中的「extend」功能來簡化和優化我們的CSS程式碼的一些不同技術:
擴充附加到選擇器上,允許我們將其附加到的選擇器與另一個選擇器合併。它類似於帶有選擇器參數的普通偽類。
這裡有一些例子 -
在現有選擇器之後擴充一個選擇器 −
pre:hover:extend(div pre) { // styles }
在現有的選擇器和extend之間使用一個空格 -
pre:hover :extend(div pre) { // styles }
我們也可以在同一個規則集中對多個選擇器使用extend,就像這樣−
h1, h2:extend(.title), h3:extend(.title) { }
我們也可以在規則集內使用"extend"來將一個選擇器的屬性擴展到另一個選擇器。例如 −
.selector1 { color: red; } .selector2 { &:extend(.selector1); background-color: yellow; }
在使用 "extend" 時,我們可以使用 "&" 符號來建立巢狀選擇器。
在下面的範例中,使用"extend"將巢狀選擇器".selector1.nested"擴展為".selector2"。這使得我們可以在".selector2"上繼承".selector1"和".nested"的樣式。
.selector1 { color: red; &.nested { background-color: yellow; } } .selector2:extend(.selector1.nested) { font-size: 16px; }
當使用CSS擴充時,重要的是要理解它在選擇器之間尋找完全匹配。換句話說,即使它們具有相同的含義,選擇器也需要具有相同的形式才能匹配。
例如,在以下的CSS程式碼中 -
.first.second, .second.first, .second > .first { color: blue; } // this will NOT match any of the selectors above .my-test:extend(.second) {} *.second { color: blue; } // this will NOT match the *.second selector .no-star:extend(.second) {}a:hover:visited { color: blue; } .my-selector:extend(a:visited:hover) {}
我們可以在Less中使用all關鍵字作為擴充參數的最後一部分,它告訴Less將選擇器作為另一個選擇器的一部分進行匹配。這將創建一個新的選擇器,其中包含原始選擇器的匹配部分,並用擴展替換它。
這是一個例子 −
.selector1.selector2.test, .test.selector1.selector3 { color: orange; } .selector2.test { &:hover { color: green; } } .selector4:extend(.test all) {}
在下面的範例中,我們定義了一個基本樣式,用於具有類別名稱.button的按鈕,然後使用「extend」功能來定義特定的樣式,透過擴展基本樣式來定義主要按鈕和危險按鈕的樣式。
.primary-button和.danger-button類別繼承了.button類別中定義的所有樣式,這有助於減少程式碼重複。此外,每個類別還添加了自己的自訂樣式,以建立不同的按鈕樣式。
在輸出中,使用者可以觀察到為.button定義的樣式被.primary-button和.danger-button繼承,並且每個類別定義的自訂樣式被套用。
// base style for a button .button { background-color: blue; border: none; color: white; padding: 10px; } // specific style for a primary button by extending the base style .primary-button:extend(.button) { background-color: green; } // specific style for a danger button by extending the base style .danger-button:extend(.button) { background-color: red; }
.button { background-color: blue; border: none; color: white; padding: 10px; } .primary-button { background-color: green; } .danger-button { background-color: red; }
在下面的範例中,我們為具有類別名稱.card的卡片定義了一個基本樣式。然後,我們使用「extend」功能來定義大卡片、帶有標題的卡片、帶有頁腳的卡片以及同時具有標題和頁腳的卡片的特定樣式。
在輸出中,使用者可以觀察到為 .card 定義的樣式被其他類別繼承並根據需要進行自訂。
//style for a card .card { background-color: white; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 20px; } // style for a large card by extending the base style .large-card:extend(.card) { width: 500px; } //style for a card with a header by extending the base style .card-with-header:extend(.card) { border-top: 2px solid black; padding-top: 30px; } // style for a card with a footer by extending the base style .card-with-footer:extend(.card) { border-bottom: 2px solid black; padding-bottom: 30px; } // style for a card with both a header and footer by extending the appropriate classes .card-with-header-and-footer:extend(.card-with-header, .card-with-footer) { }
.card { background-color: white; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 20px; } .large-card { background-color: white; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 20px; width: 500px; } .card-with-header { background-color: white; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 20px; border-top: 2px solid black; padding-top: 30px; } .card-with-footer { background-color: white; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 20px; border-bottom: 2px solid black; padding-bottom: 30px; } .card-with-header-and-footer { background-color: white; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 20px; border-top: 2px solid black; padding-top: 30px; border-bottom: 2px solid black; padding-bottom: 30px; }
使用者學習了在LESS中使用"extend"功能的語法以及使用"extend"簡化和優化CSS程式碼的各種技巧。透過利用這個功能並使用最佳化CSS程式碼的最佳實踐,使用者可以避免為相似的樣式編寫重複的程式碼,並保持CSS程式碼更有組織性。
以上是在LESS中,extend有什麼用途?的詳細內容。更多資訊請關注PHP中文網其他相關文章!