LESS - Mixin Muhafızları

Açıklama

İfadelerde basit değerleri veya argüman sayısını eşleştirmek istiyorsanız, korumalardan yararlanabilirsiniz. Mixin bildirimi ile ilişkilidir ve bir mixine eklenen koşulu içerir. Her miksin virgülle ayrılmış bir veya daha fazla korumaya sahip olacaktır; bir koruma parantez içine alınmalıdır. LESS yerine korumalı mixinler kullanırif/else ifadeler ve eşleşen karışımı belirtmek için hesaplamalar yapar.

Aşağıdaki tablo, açıklama ile birlikte farklı tipte karışım korumalarını açıklamaktadır.

Sr.No.	Türler ve Açıklama
1	Koruma Karşılaştırma Operatörleri Karşılaştırma operatörünü (=) sayıları, dizeleri, tanımlayıcıları vb. Karşılaştırmak için kullanabilirsiniz.
2	Mantıksal Operatörleri Koruma Korumalarla mantıksal işleçlerde çalışmak için and anahtar sözcüğünü kullanabilirsiniz .
3	Tür Denetleme İşlevleri Eşleşen karışımlar için değer türlerini belirlemek için yerleşik işlevleri içerir.
4	Koşullu Karışımlar LESS, mixin'i diğer karıştırma eşleşmeleriyle eşleştirmek için varsayılan işlevi kullanır .

Misal

Aşağıdaki örnek, LESS dosyasında mixin korumalarının kullanımını göstermektedir -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Şimdi style.less dosyasını oluşturun.

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Sen derlemek olabilir style.less için style.css aşağıdaki komutu kullanarak -

lessc style.less style.css

Yukarıdaki komutu yürütün; style.css dosyasını aşağıdaki kodla otomatik olarak oluşturacaktır -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şu adımları izleyin -

Yukarıdaki html kodunu şuraya kaydedin: mixin-guard.html dosya.
Bu HTML dosyasını bir tarayıcıda açın, aşağıdaki çıktı görüntülenecektir.