在LESS中，“Extend”是一種功能，允許我們從一個(gè)選擇器繼承樣式到另一個(gè)選擇器。當(dāng)我們?cè)谝粋€(gè)選擇器中使用“extend”時(shí)，它會(huì)將該選擇器的樣式與與之匹配的任何其他選擇器合并。
讓我們通過(guò)下面的例子來(lái)理解它。這樣你就可以更清楚地了解在LESS中使用”extend”特性的用法。
語(yǔ)法
用戶可以按照以下語(yǔ)法在LESS中使用“extend”功能。
.selector1:extend(.selector2) {}
//The above block does the same thing as the below
.selector1{
&:extend(.selector2);
}
登錄后復(fù)制
在上述語(yǔ)法中，”.selector1″是將繼承樣式的選擇器，而”.selector2″是它將從中繼承的選擇器。在使用”extend”時(shí)，我們還可以使用”&”符號(hào)來(lái)創(chuàng)建嵌套選擇器。
在Less中使用”Extend”特性的不同方法
以下是我們可以使用LESS中的“extend”功能來(lái)簡(jiǎn)化和優(yōu)化我們的CSS代碼的一些不同技術(shù)：
擴(kuò)展附加到選擇器
擴(kuò)展附加到選擇器上，允許我們將其附加到的選擇器與另一個(gè)選擇器合并。它類似于帶有選擇器參數(shù)的普通偽類。
這里有一些例子 –
在現(xiàn)有選擇器之后擴(kuò)展一個(gè)選擇器 ?
pre:hover:extend(div pre) {
// styles
}
登錄后復(fù)制
在現(xiàn)有的選擇器和extend之間使用一個(gè)空格 –
pre:hover :extend(div pre) {
// styles
}
登錄后復(fù)制
我們還可以在同一個(gè)規(guī)則集中對(duì)多個(gè)選擇器使用extend，就像這樣?
h1,
h2:extend(.title),
h3:extend(.title) {
}
登錄后復(fù)制
擴(kuò)展內(nèi)部規(guī)則集
我們還可以在規(guī)則集內(nèi)使用”extend”來(lái)將一個(gè)選擇器的屬性擴(kuò)展到另一個(gè)選擇器上。例如 ?
.selector1 {
color: red;
}
.selector2 {
&:extend(.selector1);
background-color: yellow;
}
登錄后復(fù)制
擴(kuò)展嵌套選擇器
在使用 “extend” 時(shí)，我們可以使用 “&” 符號(hào)來(lái)創(chuàng)建嵌套選擇器。
在下面的示例中，使用”extend”將嵌套選擇器”.selector1.nested”擴(kuò)展為”.selector2″。這使得我們可以在”.selector2″上繼承”.selector1″和”.nested”的樣式。
.selector1 {
color: red;
&.nested {
background-color: yellow;
}
}
.selector2:extend(.selector1.nested) {
font-size: 16px;
}
登錄后復(fù)制
Exact Matching With Extend
當(dāng)使用CSS擴(kuò)展時(shí)，重要的是要理解它在選擇器之間尋找完全匹配。換句話說(shuō)，即使它們具有相同的含義，選擇器也需要具有相同的形式才能匹配。
例如，在以下的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) {}
登錄后復(fù)制
擴(kuò)展“all”
我們可以在Less中使用all關(guān)鍵字作為擴(kuò)展參數(shù)的最后一部分，它告訴Less將選擇器作為另一個(gè)選擇器的一部分進(jìn)行匹配。這將創(chuàng)建一個(gè)新的選擇器，其中包含原始選擇器的匹配部分，并用擴(kuò)展替換它。
這是一個(gè)例子 ?
.selector1.selector2.test,
.test.selector1.selector3 {
color: orange;
}
.selector2.test {
&:hover {
color: green;
}
}
.selector4:extend(.test all) {}
登錄后復(fù)制
示例1
在下面的示例中，我們定義了一個(gè)基本樣式，用于具有類名.button的按鈕，然后使用“extend”功能來(lái)定義特定的樣式，通過(guò)擴(kuò)展基本樣式來(lái)定義主要按鈕和危險(xiǎn)按鈕的樣式。
.primary-button和.danger-button類繼承了.button類中定義的所有樣式，這有助于減少代碼重復(fù)。此外，每個(gè)類還添加了自己的自定義樣式，以創(chuàng)建不同的按鈕樣式。
在輸出中，用戶可以觀察到為.button定義的樣式被.primary-button和.danger-button繼承，并且每個(gè)類別定義的自定義樣式被應(yīng)用。
// 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;
}
登錄后復(fù)制
輸出
.button {
background-color: blue;
border: none;
color: white;
padding: 10px;
}
.primary-button {
background-color: green;
}
.danger-button {
background-color: red;
}
登錄后復(fù)制
示例2
在下面的示例中，我們?yōu)榫哂蓄惷?card的卡片定義了一個(gè)基本樣式。然后，我們使用“extend”功能來(lái)定義大卡片、帶有標(biāo)題的卡片、帶有頁(yè)腳的卡片以及同時(shí)具有標(biāo)題和頁(yè)腳的卡片的特定樣式。
在輸出中，用戶可以觀察到為 .card 定義的樣式被其他類繼承并根據(jù)需要進(jìn)行自定義。
//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) {
}
登錄后復(fù)制
輸出
.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;
}
登錄后復(fù)制
用戶學(xué)習(xí)了在LESS中使用”extend”功能的語(yǔ)法以及使用”extend”簡(jiǎn)化和優(yōu)化CSS代碼的各種技巧。通過(guò)利用這個(gè)功能并使用優(yōu)化CSS代碼的最佳實(shí)踐，用戶可以避免為相似的樣式編寫(xiě)重復(fù)的代碼，并保持CSS代碼更有組織性。
以上就是在LESS中，extend有什么用途？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
