Apakah kegunaan Mixins dalam LESS?

Untuk meringkaskan, mixin menyediakan cara untuk mengumpulkan set sifat CSS dan menggunakannya semula dalam set peraturan yang berbeza dalam helaian gaya. Apabila kami memasukkan mixin dalam set peraturan, semua sifat CSS yang ditakrifkan dalam mixin ditambahkan pada set peraturan yang mengandungi mixin.

Dengan mentakrifkan campuran, pembangun boleh mengumpulkan gaya berkaitan bersama-sama dan menerapkannya pada berbilang pemilih, menjadikannya lebih mudah untuk mengekalkan penggayaan yang konsisten merentas tapak web atau aplikasi.

Mari kita memahaminya melalui contoh berikut. Dengan cara ini anda boleh mendapatkan maklumat lanjut tentang Mixins.

Tatabahasa

Pengguna boleh menggunakan mixin dalam LESS mengikut sintaks berikut.

.mixin-name {
} 
.selector {
   .mixin-name();
}

Dalam sintaks di atas, ".mixin-name" ialah nama mixin dan kami boleh menentukan mana-mana sifat CSS untuk dimasukkan ke dalam blok.

".selector" ialah pemilih yang kita mahu masukkan mixin, kita masukkan mixin dengan memanggil namanya diikuti dengan ().

Ciri Mixin

Mixin ialah ciri berkuasa LESS yang memberikan pelbagai faedah kepada pembangun -

Gaul dengan kurungan

Kami juga boleh menyampaikan hujah kepada mixin untuk menyesuaikan tingkah laku mereka -

.mixin-name(@arg1, @arg2) {
   /* CSS properties using @arg1 and @arg2 */
} 
.selector {
   .mixin-name(value1, value2);
}

Campuran bersarang

Bancuhan bersarang membolehkan kami menggunakan campuran dalam campuran lain. Ini membantu kod kami kekal teratur dan lebih modular.

Ini adalah contoh campuran bersarang dalam KURANG -

// Define a mixin for setting font properties
.font-properties(@size: 14px, @weight: normal, @style: normal, @line-height: 1.5) {
   font-size: @size;
   font-weight: @weight;
   font-style: @style;
   line-height: @line-height;
} 
// Define a mixin for setting text properties
.text-properties(@color: #333, @align: left, @decoration: none) {
   color: @color;
   text-align: @align;
   text-decoration: @decoration;  
   // Use the .font-properties mixin to set font properties within the .text-properties mixin
   .font-properties();
} 
// Use the .text-properties mixin within the h1 selector
h1 {
   .text-properties(@color: red, @size: 24px);
}

Pemilih dalam Mixin

Campuran dalam KURANG membolehkan pembangun memasukkan bukan sahaja sifat tetapi juga pemilih dalam set peraturan. Ini adalah contoh -

.hover-effect() { 
   &:hover {
      background-color: #f7f7f7; color: #333; 
   } 
}
.btn {
   .hover-effect(); 
   background-color: #333; 
   color: #fff; 
}

Contoh 1

Dalam contoh ini, campuran ".bordered" mentakrifkan set gaya sempadan untuk elemen tersebut. Kami kemudiannya memasukkan campuran ini dalam pemilih lain seperti #menu a dan .post a untuk menggunakan gaya sempadan ini pada elemen tersebut juga.

Dalam output, pengguna boleh melihat dalam hasil bahawa #menu a dan .post a mempunyai gaya sempadan yang sama yang ditakrifkan dalam campuran .bordered, serta mana-mana gaya lain yang ditakrifkan dalam pemilih ini.

.bordered {
   border-top: 1px solid red;
   border-bottom: 2px solid black;
} 
#menu a {
   color: blue;
   .bordered();
} 
.post a {
   color: red;
   .bordered();
}

Output

#menu a {
   color: blue;
   border-top: 1px solid red; 
   border-bottom: 2px solid black;
} 
.post a {
   color: red;
   border-top: 1px solid red; 
   border-bottom: 2px solid black;
}

Contoh 2

Dalam contoh di bawah, kami mentakrifkan campuran yang dipanggil .box-shadow yang mengandungi set sifat untuk bayangan kotak. Campuran ini mempunyai empat parameter: @x, @y, @kabur dan @warna, yang membolehkan kami menyesuaikan sifat bayang kotak, seperti x dan y mengimbangi, jejari kabur dan warna.

Selepas itu, kami menggunakan campuran .box-shadow dalam pemilih lain dengan memanggilnya dan menghantar nilai parameter. Kami menggunakan campuran .box-shadow dalam dua pemilih berbeza .butang dan .kad. Dalam pemilih .button, kami lulus nilai khusus untuk keempat-empat parameter. Sebaliknya, dalam pemilih .card, kami hanya lulus nilai tiga parameter pertama dan menggunakan nilai lalai #000 untuk parameter @color.

Dalam output, pengguna dapat melihat bahawa kedua-dua pemilih .button dan .card mempunyai bayangan kotak dengan sifat yang berbeza.

.box-shadow (@x: 0, @y: 0, @blur: 5px, @color: #000) {
   -webkit-box-shadow: @x @y @blur @color;
   -moz-box-shadow: @x @y @blur @color;
   box-shadow: @x @y @blur @color;
}
.button {
   background-color: #fff;
   .box-shadow(2px, 2px, 10px, #ccc);
} 
.card {
   background-color: #f5f5f5;
   .box-shadow(4px, 4px, 20px);
}

Output

.button {
   background-color: #fff;
   -webkit-box-shadow: 2px 2px 10px #ccc;
   -moz-box-shadow: 2px 2px 10px #ccc;
   box-shadow: 2px 2px 10px #ccc;
} 
.card {
   background-color: #f5f5f5;
   -webkit-box-shadow: 4px 4px 20px #000;
   -moz-box-shadow: 4px 4px 20px #000;
   box-shadow: 4px 4px 20px #000;
}

Contoh 3

Dalam contoh ini, kami menunjukkan penggunaan pemilih id dengan campuran. Kami mentakrifkan campuran yang dipanggil #primary_button() yang menetapkan beberapa gaya butang asas, termasuk keadaan tuding. Kami kemudian menggunakan campuran ini dalam dua pemilih berbeza: .button dan .nav-link. Pemilih ini akan mempunyai gaya butang yang sama, termasuk keadaan tuding.

#primary_button mixin mentakrifkan satu set sifat untuk elemen butang, termasuk warna latar belakang, warna fon, jidar dan pelapik. Ia juga termasuk keadaan tuding yang menukar latar belakang dan warna fon apabila butang dituding ke atas.

Pengguna dapat melihat dalam output bahawa pemilih .button dan .nav-link mempunyai gaya butang yang sama, termasuk keadaan tuding, kerana mereka menggunakan campuran #button_primary.

#primary_button() {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   &:hover {
      background-color: white;
      color: blue;
   }
} 
.button {
   #primary_button();
} 
.nav-link {
   #primary_button();
   text-decoration: none;
}

Output

.button {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
}
.button:hover {
   background-color: white;
   color: blue;
} 
.nav-link {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   text-decoration: none;
}
.nav-link:hover {
   background-color: white;
   color: blue;
}

Pengguna mempelajari cara mentakrifkan campuran dan cara menggunakannya dengan membungkusnya dalam pemilih berbeza dan lulus parameter untuk menyesuaikan sifatnya.

Contoh yang disediakan menunjukkan cara menggunakan mixin untuk menggunakan gaya sempadan, bayang kotak dan gaya butang pada pemilih yang berbeza dan menunjukkan cara menggunakan mixin dengan pemilih id untuk menggunakan gaya butang yang sama pada pemilih yang berbeza.

Dengan memahami contoh yang diberikan, pengguna boleh menggunakan mixin dalam projek mereka dan mendapat manfaat daripada fleksibiliti dan kebolehgunaan semula mereka.

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