LESS - Genişlet

Extend, diğer seçici stillerini bir seçicide kullanarak genişleten LESS sözde bir sınıftır. :extend seçici.

Misal

Aşağıdaki örnek kullanımını gösterir uzatmak AZ dosyasında -

ext_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

Ardından style.less dosyasını oluşturun.

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Sen derlemek olabilir extend.less dosyayı extend.css şu 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

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

Çıktı

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

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

Sözdizimini Genişlet

Extend, kural kümesine yerleştirilir veya bir seçiciye eklenir. Virgülle ayrılmış bir veya daha fazla sınıf içeren sözde bir sınıfa benzer. İsteğe bağlı anahtar kelimeyi kullanmaallher seçici takip edilebilir.

Misal

Aşağıdaki örnek , LESS dosyasında genişletilmiş sözdiziminin kullanımını gösterir -

ext_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

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

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

Aşağıdaki komutu kullanarak style.less dosyasını style.css olarak derleyebilirsiniz -

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

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

Çıktı

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

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

Aşağıdaki tablo, LESS'te kullanabileceğiniz tüm genişletilmiş sözdizimi türlerini listeler -

Sr.No.	Türler ve Açıklama
1	Seçiciye Ekli Olarak Genişlet Extend, parametre olarak seçici ile sözde bir sınıfa benzer görünen bir seçiciye bağlıdır.
2	İç Kural Kümesini Genişlet &:extend(selector) sözdizimi, kural kümesinin gövdesine yerleştirilebilir.
3	İç İçe Seçicileri Genişletme İç içe geçmiş seçiciler, genişletme seçici kullanılarak eşleştirilir .
4	Extend ile Tam Eşleştirme Varsayılan olarak, extend seçiciler arasındaki tam eşleşmeyi arar.
5	n'inci İfade N'inci ifade biçimi, aksi takdirde, seçiciyi farklı olarak ele alır.
6	"Tümünü" genişlet Tüm anahtar kelime sonunda belirlendiğindeextend bağımsız değişken daha sonra LESS, başka bir seçicinin parçası olarak bu seçiciyle eşleşir.
7	Extend ile Seçici Enterpolasyonu extend enterpolasyonlu seçiciye bağlanabilir.
8	@Media içinde kapsam belirleme / genişletme Extend, yalnızca aynı medya bildiriminde bulunan seçiciyle eşleşir.
9	Çoğaltma Tespiti Seçicilerin çoğaltılmasını algılayamaz.

Aşağıda, Uzatmak için Kullanım Durumlarının türleri verilmiştir

Sr.No.	Türler ve Açıklama
1	Klasik Kullanım Durumu Klasik kullanım durumu, temel sınıfı LESS'e eklemekten kaçınmak için kullanılır.
2	CSS Boyutunu Azaltma Extend, seçiciyi kullanmak istediğiniz özelliklere kadar taşımak için kullanılır; bu, css tarafından oluşturulan kodun azaltılmasına yardımcı olur.
3	Stilleri Birleştirme / Daha Gelişmiş Bir Karışım Extend'i kullanarak, belirli bir seçicinin aynı stillerini başka bir seçicide birleştirebiliriz.