Apakah kegunaan extend dalam KURANG?

Dalam KURANG, "Extend" ialah ciri yang membolehkan kami mewarisi gaya daripada satu pemilih kepada pemilih yang lain. Apabila kami menggunakan "lanjutkan" dalam pemilih, ia menggabungkan gaya pemilih itu dengan mana-mana pemilih lain yang sepadan dengannya.

Mari kita memahaminya melalui contoh berikut. Dengan cara ini anda boleh memahami dengan lebih jelas penggunaan ciri "lanjutkan" dalam KURANG.

Tatabahasa

Pengguna boleh menggunakan fungsi "extend" dalam LESS mengikut sintaks berikut.

.selector1:extend(.selector2) {}
//The above block does the same thing as the below
.selector1{
   &:extend(.selector2);
}

Dalam sintaks di atas, ".selector1" ialah pemilih yang akan mewarisi gaya dan ".selector2" ialah pemilih yang akan diwarisinya. Apabila menggunakan "lanjutkan", kita juga boleh menggunakan simbol "&" untuk membuat pemilih bersarang.

Cara berbeza untuk menggunakan ciri "Perluas" dalam Kurang

Berikut adalah beberapa teknik berbeza yang boleh kami gunakan ciri "lanjutkan" dalam KURANG untuk memudahkan dan mengoptimumkan kod CSS kami:

Sambungan dilampirkan pada pemilih

Sambungan dilampirkan pada pemilih, membolehkan kami menggabungkan pemilih yang dilampirkan dengan pemilih lain. Ia seperti kelas pseudo biasa dengan parameter pemilih.

Berikut adalah beberapa contoh -

• Kembangkan pemilih selepas pemilih sedia ada −

pre:hover:extend(div pre) {
   // styles
}

• Gunakan ruang antara pemilih sedia ada dan lanjutkan -

pre:hover :extend(div pre) {
   // styles
}

• Kami juga boleh menggunakan lanjutan pada berbilang pemilih dalam set peraturan yang sama, seperti ini −

h1,
h2:extend(.title),
h3:extend(.title) {
}

Set peraturan dalaman lanjutan

Kami juga boleh menggunakan "lanjutkan" dalam set peraturan untuk memanjangkan sifat satu pemilih kepada pemilih lain. Contohnya −

.selector1 {
   color: red;
} 
.selector2 {
   &:extend(.selector1);
   background-color: yellow;
}

Pemilih bersarang lanjutan

Apabila menggunakan "lanjutkan", kita boleh menggunakan simbol "&" untuk membuat pemilih bersarang.

Dalam contoh di bawah, gunakan "lanjutkan" untuk melanjutkan pemilih bersarang ".selector1.nested" kepada ".selector2". Ini membolehkan kami mewarisi gaya ".selector1" dan ".nested" pada ".selector2".

.selector1 {
   color: red;  
   &.nested {
      background-color: yellow;
   }
} 
.selector2:extend(.selector1.nested) {
   font-size: 16px;
}

Padanan Tepat Dengan Extend

Apabila menggunakan sambungan CSS, penting untuk memahami bahawa ia mencari padanan tepat antara pemilih. Dalam erti kata lain, walaupun ia mempunyai makna yang sama, pemilih perlu dalam bentuk yang sama untuk dipadankan.

Sebagai contoh, dalam kod CSS berikut -

.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) {}

Kembangkan “semua”

Kami boleh menggunakan semua kata kunci dalam Less sebagai bahagian terakhir parameter sambungan, yang memberitahu Less untuk memadankan pemilih sebagai sebahagian daripada pemilih lain. Ini akan mencipta pemilih baharu yang mengandungi bahagian padanan pemilih asal dan menggantikannya dengan sambungan.

Ini adalah contoh −

.selector1.selector2.test,
.test.selector1.selector3 {
   color: orange;
} 
.selector2.test {
   &:hover {
      color: green;
   }
} 
.selector4:extend(.test all) {}

Contoh 1

Dalam contoh di bawah, kami mentakrifkan gaya asas untuk butang dengan nama kelas .butang dan kemudian menggunakan fungsi "lanjutkan" untuk menentukan gaya tertentu dengan memanjangkan gaya asas untuk menentukan gaya bagi butang utama dan bahaya.

Kelas

.primary-button dan .danger-button mewarisi semua gaya yang ditakrifkan dalam kelas .button, yang membantu mengurangkan pertindihan kod. Selain itu, setiap kelas menambah gaya tersuainya sendiri untuk mencipta gaya butang yang berbeza.

Dalam output, pengguna boleh melihat bahawa gaya yang ditakrifkan untuk .button diwarisi oleh .primary-button dan .danger-button, dan gaya tersuai yang ditakrifkan untuk setiap kategori digunakan.

// 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;
}

Output

.button {
   background-color: blue;
   border: none;
   color: white;
   padding: 10px;
} 
.primary-button {
   background-color: green;
} 
.danger-button {
   background-color: red;
}

Contoh 2

Dalam contoh di bawah, kami mentakrifkan gaya asas untuk kad dengan nama kelas .kad. Kami kemudian menggunakan fungsi "lanjutkan" untuk menentukan gaya khusus untuk kad besar, kad dengan pengepala, kad dengan pengaki dan kad dengan pengepala dan pengaki.

Dalam output, pengguna boleh melihat bahawa gaya yang ditakrifkan untuk .card diwarisi oleh kelas lain dan disesuaikan mengikut keperluan.

//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) {
}

Output

.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;
}

Pengguna mempelajari sintaks untuk menggunakan fungsi "lanjutkan" dalam KURANG dan pelbagai teknik untuk menggunakan "lanjutkan" untuk memudahkan dan mengoptimumkan kod CSS. Dengan memanfaatkan ciri ini dan menggunakan amalan terbaik untuk mengoptimumkan kod CSS, pengguna boleh mengelak daripada menulis kod pendua untuk gaya yang serupa dan memastikan kod CSS lebih teratur.

Atas ialah kandungan terperinci Apakah kegunaan extend dalam KURANG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!