LESS - İçe Aktarma Direktifleri

Açıklama

@importdirektifi, dosyaları koda aktarmak için kullanılır. LESS kodunu farklı dosyalara yayar ve kod yapısını kolayca korumaya izin verir. @İmport ifadelerini kodun herhangi bir yerine koyabilirsiniz .

Örneğin, dosyayı kullanarak içe aktarabilirsiniz. @importanahtar kelime olarak @import "dosya_adı.less" .

Dosya uzantıları

Aşağıdaki gibi farklı dosya uzantılarına bağlı olarak @import ifadelerini kullanabilirsiniz :

.Css uzantısını kullanıyorsanız , CSS olarak kabul edilecek ve @import ifadesi olduğu gibi kalacaktır.
Başka bir uzantı içeriyorsa, DAHA AZ olarak kabul edilecek ve içe aktarılacaktır.
LESS uzantısı yoksa, içe aktarılmış LESS dosyası olarak eklenecek ve dahil edilecektir.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Misal

Aşağıdaki örnek, SCSS dosyasında değişken kullanımını göstermektedir -

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

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Ardından, import_dir.less dosyasını oluşturun.

import_dir.less

.myline {
   font-size: 20px;
}

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

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

İmport_dir.less dosyası içe alacak style.less yolundan dosyasıhttps://www.tutorialspoint.com/less/import_dir.less.

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

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Çıktı

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

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