8

Bootstrapのカスタマイズのベスト プラクティスに準拠し、 mixinをサポートするために、LESS を Bootstrap エディター ( Bootply.com ) に統合することを検討しています。

ただし、単純な CSS オーバーライドよりも LESS を使用することの具体的な利点 (パフォーマンスなど) についてはまだ判断していません。最終的に LESS は CSS にコンパイルされるようです。Bootstrap の新しいバージョンが導入されると、LESS はより多くの保守/再コンパイル タスクを導入するようです。

Bootstrap のカスタマイズは、「bootstrap.css」の後にカスタムの「theme.css」を使用して実行できることを知っています。したがって、.navbar の色を変更したい場合は、次のように「theme.css」に数行追加するだけです。

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

そして、マークアップは次のようになります。

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

これがカスタマイズのベスト プラクティスではない場合、LESS はそれをどのように改善しますか?

4

1 に答える 1

12

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 つの色を選択でき、Bootstrap の CSS ファイル内のどこかで、上記の混乱のように見える何かが自動的に更新されます。

于 2013-05-09T12:47:35.753 に答える