ブートストラップのカスタマイズ：なぜ私はLESSを使うべきですか？

Question

Bootstrapエディタ（Bootply.com）にLESSを統合して、ブートストラップcustomization best practicesに準拠させ、ミックスインをサポートすることを検討しています。

ただし、単純なCSSオーバーライドよりもLESSを使用した場合の具体的な利点（パフォーマンスなど）はまだ決まっていません。結局、LESSはCSSにコンパイルされているようです。 LESSはBootstrapの新しいバージョンが導入されたので、より多くのメンテナンス/再コンパイルタスクを導入するようです。

現在Bootplyでのブートストラップのカスタマイズは、 'bootstrap.css'の後にカスタム 'theme.css'を追加することによって行われます。ですから、.navbarの色を変更したい場合、私はちょうどに「theme.css」のような..

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

を数行を追加します。そしてマークアップは次のようになります。これがあれば

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

カスタマイズのベストプラクティスではありませんが、LESSはどのように改善していますか？

Answer 1

LESS抄録離れて、このようなCSSを台無しに：あなたのケースで

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

、ナビゲーションバーには、勾配を持っているので、あなたは、単に背景色を変更することはできません。 LESSを使うと、2つの色を選ぶことができ、ブートストラップのCSSファイルのどこかで、上記のようなものが自動的に更新されます。