DAHA AZ - Tarayıcıda Daha Az Kullanım
Less dosyasını sunucu tarafında değil, ihtiyaç duyulduğunda dinamik olarak derlemek istediğinizde tarayıcıda daha az kullanılır; bunun nedeni, daha azının büyük bir javascript dosyası olmasıdır.
Başlangıç olarak, tarayıcıda LESS kullanmak için LESS komut dosyasını eklememiz gerekir -
<script src = "less.js"></script>
Stil etiketlerini sayfada bulmak için aşağıdaki satırı sayfaya eklememiz gerekir. Ayrıca, derlenmiş css ile stil etiketleri oluşturur.
<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>
Ayar Seçenekleri
Komut dosyası etiketinden önce, seçenekler programlı olarak daha az nesne üzerinde ayarlanabilir. Daha az ve ilk bağlantı etiketlerinin tüm programatik kullanımını etkileyecektir.
Örneğin, seçeneği aşağıdaki gibi ayarlayabiliriz -
<script>
less = {
env: "development"
};
</script>
<script src = "less.js"></script>
Seçeneği, komut dosyası etiketinde aşağıda belirtildiği gibi başka bir biçimde de ayarlayabiliriz -
<script>
less = {
env: "development"
};
</script>
<script src = "less.js" data-env = "development"></script>
Bu seçenekleri bağlantı etiketlerine de ekleyebilirsiniz.
<link data-dump-line-numbers = "all"
data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }'
rel = "stylesheet/less" type = "text/css" href = "less/style.less">
Öznitelik seçenekleri için dikkate alınması gereken noktalar şunlardır:
window.less <script tag <link etiketi önem seviyesidir.
Veri özellikleri deve durumunda yazılamaz; bağlantı etiketi seçeneği, zaman seçenekleri olarak temsil edilir.
Dize olmayan değerlere sahip veri öznitelikleri JSON geçerli olmalıdır.
İzleme Modu
İzle modu için env seçeneği ayarlayarak etkinleştirilebilir geliştirme ve çağrı less.watch () less.js dosya eklendikten sonra. İzleme modunun geçici olarak etkinleştirilmesini istiyorsanız , URL'ye #! Watch ekleyin.
<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>
Değişkenleri Değiştirin
LESS değişkeninin çalışma zamanı değişikliği etkinleştirildi. LESS dosyası, yeni değer çağrıldığında yeniden derlenir. Aşağıdaki kod, değiştirme değişkenlerinin temel kullanımını gösterir -
less.modifyVars({
'@buttonFace': '#eee',
'@buttonText': '#fff'
});
Hata ayıklama
Yukarıda belirtildiği gibi url veya dumpLineNumbers seçeneğine ! DumpLineNumbers: mediaquery seçeneğini ekleyebiliriz . Ortam sorgulama seçeneği FireLESS ile kullanılabilir (DAHA AZ oluşturulan CSS stillerinin orijinal LESS dosya adını ve satır numarasını gösterir.)
Seçenekler
Less.js komut dosyası dosyasını yüklemeden önce, seçenekler global daha az nesnede ayarlanmalıdır .
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src = "less.js"></script>
async- Bu bir Boole türüdür. İçe aktarılan dosyalar, eşzamansız seçeneği olup olmadığına bakılmaksızın istenir. Varsayılan olarak yanlıştır.
dumpLineNumbers- Bir string tipidir. Çıktı css dosyasında, dumpLineNumbers ayarlandığında kaynak satırı bilgileri eklenir. Belirli bir kuralın geldiği hataları ayıklamaya yardımcı olur.
env- Bir string tipidir. Env, geliştirme veya üretim üzerinde çalışabilir. Belge URL'si ile başladığında geliştirme otomatik olarak ayarlanırfile:// veya yerel makinenizde mevcut.
errorReporting - Derleme başarısız olduğunda, hata raporlama yöntemi ayarlanabilir.
fileAsync- Bu bir Boole türüdür. Dosya protokolü olan bir sayfa mevcut olduğunda, zaman uyumsuz olarak içe aktarılıp aktarılmayacağını isteyebilir.
functions - Nesne tipidir.
logLevel- Bir sayı türüdür. Javascript konsolunda günlük düzeyini görüntüler.
2: Bilgi ve hatalar
1: Hatalar
0: Hiçbir şey
poll- Saat modunda, anketler arasında zaman milisaniye cinsinden görüntülenir. Bir tamsayı türüdür; varsayılan olarak 1000'e ayarlanmıştır.
relativeUrls- URL'ler göreli olacak şekilde ayarlanır; varsayılan olarak bu seçenek yanlış olarak ayarlanmıştır. Bu, URL'lerin zaten girişten daha az dosyaya göre olduğu anlamına gelir. Bu bir Boole türüdür.
globalVars- Global değişkenlerin listesini koda ekler. Dize türü değişkeni tırnak işaretlerine dahil edilmelidir
modifyVars- Global değişken seçeneğinden farklıdır. Beyanı daha az dosyanızın sonunda taşır.
rootpath - Her URL kaynağının başlangıcında yolları belirler.
useFileCache- Oturum başına dosya önbelleği kullanır. Daha az dosyadaki önbellek, daha az dosyanın yeniden alınmayacağı modifiyeVars'ı çağırmak için kullanılır.