LESS - Kapsam

Açıklama

Değişken kapsamı, mevcut değişkenin yerini belirtir. Değişkenler yerel kapsamdan aranacak ve eğer mevcut değillerse, derleyici üst kapsamdan arayacaktır.

Misal

Aşağıdaki örnek, LESS dosyasında ad alanlarının ve erişimcilerin kullanımını gösterir -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

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

.myclass {
   font-size: 20px;
   color: green;
}

Çıktı

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

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