LESS'ten CSS'e Derleme

Nasıl çalışır?

Bootstrap 3 tabanlı eski bir tema ya da bir WordPress şablonu çoğu zaman LESS ile yazılmıştır; tarayıcı LESS'i okuyamaz, önce düz CSS'e derlenmesi gerekir. Kodu sol panele yapıştırın; sağ panelde @ana-renk gibi değişkenler değerleriyle, .golge(8px) gibi karışım (mixin) çağrıları içerdikleri kurallarla değiştirilir, iç içe yazılmış kurallar .kart h2 biçiminde düz seçicilere açılır ve darken(@ana-renk, 10%) gibi renk fonksiyonları hesaplanıp #08427d gibi bir renk koduna dönüşür. (@bosluk / 2) gibi işlemler de çözülür: 16px'in yarısı 8px olur. Okunaklı çıktı 2 boşlukla girintilenir; Küçültülmüş seçerseniz boşluk ve yorumlar atılıp CSS tek satıra iner. Kodda tanımsız bir değişken ya da kapanmamış bir süslü parantez varsa derleme yapılmaz; hatanın satır ve sütunu söylenir. Sonuç satırı kaç satır LESS'in kaç satır CSS'e dönüştüğünü ve çıktının bayt boyutunu gösterir. Başka dosyadan @import edilen içerik bu sayfaya ulaşamaz; o dosyanın metnini de yapıştırın.

Bu araç less to css, less to css converter, less derleyici, less compiler online, lessc online aramalarıyla da biliniyor.

LESS nedir?

LESS (Leaner Style Sheets), CSS'e değişken, karışım (mixin), iç içe kural ve renk fonksiyonları ekleyen bir ön işlemci dilidir. 2009'da çıktı; Bootstrap 3 ve onun üzerine kurulan binlerce tema LESS ile yazıldı. Tarayıcı .less dosyasını doğrudan okumaz; derleyici değişkenleri değerleriyle değiştirir, iç içe kuralları açar ve ortaya düz bir .css dosyası çıkar.

Mixin (karışım) nedir?

Mixin, LESS'te bir kural grubunu adla tanımlayıp başka kuralların içinde yeniden kullanmaktır: .golge(@derinlik) { box-shadow: ... } bir kez yazılır, sonra .kart { .golge(8px); } ile çağrılır. Derleme sırasında çağrının yerine mixin'in içindeki özellikler, verilen değerlerle doldurularak yazılır. Aynı gölgeyi on yerde kullanmak için on kez yazmak gerekmez.

LESS ile SCSS arasındaki fark nedir?

İkisi de CSS'e değişken, mixin ve iç içe kural ekleyen ön işlemcidir ve aynı işi görür; fark söz diziminde ve ekosistemdedir. LESS değişkeni @ ile (@renk), SCSS $ ile ($renk) yazar; LESS'te mixin sıradan bir sınıf gibi çağrılır (.golge();), SCSS'te @mixin ve @include gerekir. Bootstrap 3 LESS kullanıyordu, Bootstrap 4 ve sonrası SCSS'e geçti; bu yüzden LESS bugün daha çok eski tema ve projelerde karşınıza çıkar.

@import ettiğim dosyalar neden derlenmiyor?

Bu sayfa yalnız panele yapıştırdığınız metni derler; bilgisayarınızdaki ya da bir sunucudaki başka dosyaları okuyamaz, çünkü kodunuz hiçbir yere gönderilmez. @import "degiskenler.less" satırı bu yüzden "dosya okunamaz" hatası verir. Çözüm basittir: içe aktarılan dosyanın içeriğini kopyalayıp @import satırının yerine yapıştırın. Bootstrap gibi çok dosyalı bir projeyi derlemek için projenin kendi derleme komutunu (lessc) kullanın.

url(...) ile yazılmış bir CSS içe aktarması, örneğin bir Google Fonts adresi, derlenmez ama çıktıya aynen geçer; tarayıcı onu sayfayı açarken kendisi yükler. Satır içi JavaScript (ters tırnak içindeki `...` ifadeleri) less 4'te varsayılan olarak kapalıdır ve bu sayfada da çalışmaz.

Okunaklı mı, küçültülmüş mü?

Okunaklı çıktı derlenen CSS'i incelemek, bir kuralın nereden geldiğini görmek ya da LESS'ten tamamen kurtulup düz CSS ile devam etmek için doğrudur. Küçültülmüş çıktı ise canlı siteye konacak dosya içindir: boşluk ve yorum atılır, dosya küçülür.

LESS'ten vazgeçip projeye düz CSS olarak devam etmek istiyorsanız okunaklı çıktıyı alın; değişkenlerin yerini değerler alacağı için ileride tek bir rengi değiştirmek birden çok satır demektir. Bu durumda CSS'in kendi değişkenleri (--ana-renk) iyi bir yedektir.

• Derlenen kodu görmek, LESS'ten düz CSS'e geçmek → Okunaklı
• Canlı siteye yüklemek → Küçültülmüş
• Çok dosyalı Bootstrap projesi → projenin lessc komutu

Sık sorulanlar

LESS dosyasını CSS'e nasıl çeviririm?

.less dosyasının içeriğini kopyalayıp bu sayfadaki sol panele yapıştırın. Sağ panelde derlenmiş CSS belirir; kopyalayabilir ya da .css dosyası olarak indirebilirsiniz. Dosya başka .less dosyalarını @import ediyorsa onların içeriğini de metne ekleyin.

"Değişken tanımlı değil" hatası ne demek?

Kodda kullanılan bir @değişken aynı metinde tanımlanmamış demektir. Çoğu zaman değişkenler ayrı bir dosyada (variables.less gibi) durur ve @import ile gelir; o dosyanın içeriğini de yapıştırdığınızda hata kaybolur.

SCSS ya da Sass kodunu da derleyebilir miyim?

Hayır. SCSS'in söz dizimi farklıdır ($değişken, @include) ve ayrı bir derleyici ister. Bu sayfa yalnız LESS derler; SCSS'i yalnız girintilemek isterseniz CSS biçimlendirme aracı iş görür.

Kodum bir sunucuya gönderiliyor mu?

Hayır. Derleme tamamen tarayıcınızda yapılır; yapıştırdığınız kod bu sayfadan çıkmaz ve hiçbir yere kaydedilmez.