Çevrimiçi Less'ten CSS'e Derleyici
Less kodunu tarayıcınızda CSS'e derleyin. Değişkenler, iç içe kurallar, mixin'ler ve işlemler resmî less.js derleyicisiyle düz CSS'e açılır; lessc kurmadan çıktıyı kontrol edebilirsiniz.
Less değişkenlerinin, iç içe kurallarının ve mixin'lerinin ürettiği CSS'i kontrol etmek.
Less
CSS
Ne zaman kullanılır?
- Less değişkenlerinin, iç içe kurallarının ve mixin'lerinin ürettiği CSS'i kontrol etmek.
- Düz CSS kullanan bir proje için küçük bir Less dosyasını dönüştürmek.
Nasıl kullanılır?
- Less kodunu yapıştırın veya .less dosyası açın.
- Hedeflediğiniz tarayıcılara uygun üretici ön eki ayarını seçin.
- Üretilen CSS'i inceleyip kopyalayın.
Less girdisi
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}CSS çıktısı
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Ayrıntılar ve sınırlamalar
Tanımsız değişken veya kapatılmamış parantez derlemeyi durdurur. Hata ararken kısa bir kod parçasıyla başlayın.
Derleme tarayıcınızda yapılır. Dış URL'ye yönelik @import, tarayıcının bu kaynağı indirmesine neden olabilir; bağımsız kod kullanmayı tercih edin.
Diğer yerel dosyaları içe aktarma, Less eklentileri ve projeye özel derleyici seçenekleri kullanılamaz. Üretici ön ekleri hedef tarayıcı ayarına bağlıdır.
FAQ
lessc ile derlemekle aynı mı?
lessc'nin kullandığı less.js derleyicisini kullanır. Bu nedenle bağımsız bir dosya varsayılan seçeneklerle aynı CSS'e derlenir. Yerel içe aktarımlar ve eklentiler gibi proje özellikleri burada kullanılamaz.
@import kullanan dosyayı derleyebilir miyim?
Bilgisayarınızdaki diğer dosyalara işaret eden içe aktarımlar tarayıcıda çözümlenemez. İçe aktarılan kodu satır içine yapıştırın veya tüm projeyi lessc ile derleyin.
Less ve CSS arasındaki fark nedir?
Less bir CSS ön işlemcisidir. Değişken, iç içe kural, mixin ve işlev desteği ekler; tarayıcıda kullanılmadan önce CSS'e derlenmesi gerekir.