Bootstrap Özelleştirme: Neden LESS kullanmalıyım?

Question

Bootstrap düzenleyicimize (Bootply.com) Bootstrap customization best practices'a uyum sağlamak için LESS'i entegre etmeyi ve karışımları desteklemeyi düşünüyorum. Bununla birlikte, basit CSS geçersiz kılmaları üzerinden LESS kullanımıyla ilgili belirli avantajları (performans ve diğer) henüz belirlemem gerekiyor. Sonuçta LESS CSS'ye derlenmiştir. Bootstrap'in yeni sürümleri sunulduğunda, LESS'in daha fazla bakım/yeniden oluşturma görevlerini sunacağı anlaşılıyor.

Şu anda Önyükleme ile Bootstrap özelleştirmesi, 'bootstrap.css' ifadesinden sonra özel bir 'theme.css' eklenerek yapılır. Bu ise

<div class="navbar navbar-custom navbar-fixed-top">.. 

: Eğer .navbar rengini değiştirmek istiyorsanız Yani sadece birkaç satır için 'theme.css' gibi ..

.navbar-custom .navbar-inner { 
    background-color:#444444; 
} 

Ve sonra biçimlendirme benziyor eklersiniz Özelleştirme için en iyi yöntem değil, LESS nasıl gelişir? Böyle

Answer 1

AZ özetleri uzakta CSS pisliklerimizi: Senin durumunda

background: #45484d; /* Old browsers */ 
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000',GradientType=0); /* IE6-9 */ 

, navbar renk geçişini içeren, böylece sadece arka plan rengini değiştiremez. Eğer LESS kullanıyorsanız, iki renk seçebilirsiniz ve Bootstrap'ın CSS dosyalarının içinde bir yerde, yukarıdaki karışıklık gibi görünen bir şey otomatik olarak güncellenir.