LESS - Kurulum

Bu bölümde, LESS'in nasıl kurulacağını adım adım anlayacağız.

LESS için Sistem Gereksinimleri

Operating System - Çapraz platform
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

LESS kurulumu

Şimdi LESS'in kurulumunu anlayalım.

Step 1 - ihtiyacımız var NodeJsDAHA AZ örnek çalıştırmak için. NodeJ'leri indirmek için bağlantıyı açınhttps://nodejs.org/en/, aşağıda gösterildiği gibi bir ekran göreceksiniz -

Dowload son Özellikleri zip dosyasının sürümünü.

Step 2- Node.js'yi sisteminize yüklemek için kurulumu çalıştırın .

Step 3- Ardından, NPM (Düğüm Paketi Yöneticisi) aracılığıyla sunucuya LESS'i yükleyin. Komut isteminde aşağıdaki komutu çalıştırın.

npm install -g less

Step 4 - LESS'in başarılı bir şekilde kurulmasından sonra, komut isteminde aşağıdaki satırları göreceksiniz -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

Misal

Aşağıda basit bir LESS örneği verilmiştir.

merhaba.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Şimdi CSS'ye oldukça benzeyen bir dosya style.less oluşturalım, tek fark onun .less uzantısı ile kaydedilecek olmasıdır . Hem .html hem de .less dosyaları klasörün içinde oluşturulmalıdırnodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

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

lessc style.less style.css

Yukarıdaki komutu çalıştırdığınızda, style.css dosyasını otomatik olarak oluşturacaktır . LESS dosyasını her değiştirdiğinizde, yukarıdaki komutucmdve sonra style.css dosyası güncellenecektir.

Style.css Yukarıdaki komutu çalıştırdığınızda dosyası aşağıdaki kodu olacak -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Çıktı

Yukarıdaki kodun nasıl çalıştığını görmek için şimdi aşağıdaki adımları gerçekleştirelim -

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