Öncelikle LessCss'i indiriyoruz. aşağıdaki resimde görülen linke tıklayıp LessCss son versiyonu indiriyoruz.Ben dosyayı "less.js" olarak kayıt ettim.
Daha sonra html sayfamı hazırlıyorum. Aşağıdaki sayfada öncelikle still.less i sonra ise less.js dosyalarını sayfaya ekliyorum
Artık stil.less dosyamızda less css kodlarımızı yazabiliriz.
Yukarıdaki yapıyı hazırladıktan sonra dosyalarımızın görünümü şu şekilde oluyor.
Bu dosyaları site üzerine yükledim ancak çalışmadığını görüyoruz.
İşte bu noktada sebebini öğrenmek isterseniz zaten size tarayıcının konsol ekranı yardımcı oluyor. Aşağıdaki ekranda ilgili dosya sunucuya yüklemiş olmasına rağmen .less uzantısının olmadığını söylüyor.
Bu hatanın sebebi IIS üzerinde mime type olarak .less uzantısının tanımlanmamasıdır.İlgili adrese gittiğinizde o dosya hiç yokmuş gibi 404 hatası verecektir.
Mime type iis yönetim arayüzünün ana sayfasında "Mime Types" şeklinde bir menü var. Bu menüden açılan ekranda sağ bölümdeki Add butonu ile aşağıdaki şekilde ekliyoruz.
Tanımladığımız anda az önce 404 hatası veren sayfada aşağıdaki gibi artık içeriğini görebilir durumdayız.
Ve artık aşağıdaki gibi html sayfamıza gittiğinizde stil.less dosyamızın çalıştığını görebiliyoruz.
Bu şekilde projenizde lessCss i dinamik olarak kullanabilirsiniz.
Not: Performans gerektiren uygulamalarda getirdiği yük test edilmelidir. Sonuçta ilgili less.js dosyası 100KB boyutundadır ve her tarayıcı isteğinde ilgili stil.less dosyasından gerçek css kodlarına geçişin sağlanması nedeniyle statik bir css dosyasından daha yavaş çalışacaktır.
Örnekte kullandığım dosyaları aşağıdaki linkten indirebilirsiniz.
lessCss.rar (30,8KB)
iyi çalışmalar.