2013-05-09 18 views
7

Ich überlege, LESS in meinen Bootstrap-Editor zu integrieren (Bootply.com), um Bootstrap customization best practices zu entsprechen, und Unterstützung für Mixins.Bootstrap Customization: Warum sollte ich weniger verwenden?

Allerdings habe ich noch die spezifischen Vorteile (Leistung und sonst) der Verwendung von LESS gegenüber einfachen CSS-Überschreibungen zu bestimmen. Es scheint, dass am Ende LESS zu CSS kompiliert wird. Es sieht so aus, als würde LESS einfach mehr Wartungs-/Neukompilierungsaufgaben einführen, wenn neue Versionen von Bootstrap eingeführt werden.

Momentan erfolgt die Bootstrap-Anpassung mit Bootply durch Hinzufügen einer benutzerdefinierten 'theme.css' nach der 'bootstrap.css'. Also, wenn Sie die .navbar Farbe ändern möchten möchte ich hinzufügen, nur ein paar Zeilen zu ‚theme.css‘ wie ..

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

Und dann das Markup wie folgt aussieht:

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

Wenn dies keine Best Practice für die Anpassung, wie verbessert LESS es?

+2

Nur um zu verdeutlichen: Fragen Sie nach den [Vorteile von LESS im Allgemeinen] (http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter- Stylesheets /), oder verwenden Sie LESS in Ihrer spezifischen Konfiguration? –

+0

Ich denke ein wenig von beiden, aber mehr über die Verwendung von LESS speziell für Bootstrap.css Anpassung. – ZimSystem

Antwort

11

WENIGER Abstracts entfernt CSS Verwirrungen wie folgt aus:

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 */ 

In Ihrem Fall hat der navbar ein Gefälle, so dass Sie einfach nicht die Hintergrundfarbe ändern. Wenn Sie LESS verwenden, können Sie zwei Farben auswählen, und irgendwo innerhalb der Bootstrap-CSS-Dateien wird etwas, das wie oben beschrieben aussieht, automatisch aktualisiert.

+0

Danke, also gibt es eine Möglichkeit, LESS zu verwenden und die Überschreibungen in eine separate 'theme.css' Datei zu kompilieren - oder es könnte nur gemacht werden, indem 'bootstrap.css' benutzerdefiniert erstellt wird? – ZimSystem

+1

Sie müssen entweder Bootstrap als einfaches CSS oder Bootstrap mit LESS verwenden. In einer LESS-Datei, in die Werte eingesteckt sind, finden Sie Dinge wie '.border-radius (@baseBorderRadius);' Sehen Sie sich [navbar.less] an (https://github.com/twitter/bootstrap/blob/ master/less/navbar.less) um zu sehen, was ich meine. Also nein, Sie können nicht zu einer separaten Datei kompilieren, wenn Sie Bootstrap verwenden. – woz

+0

Okay .. Ich muss darüber nachdenken, LESS weiter zu implementieren. Ihre Antwort hat zur Klärung beigetragen. – ZimSystem

Verwandte Themen