埋め込みブートストラップクラスのプロパティ別のクラス

Question

に私は私のサイトのレイアウトを設定し、のようなもの持っているブートストラップを使用しています：正常に動作します

<div class="row-fluid"> 
    <div class="span3">  
    </div> 
    <div class="span9"> 
    </div> 
    </div> 

を。しかし、私はこれがマークアップでプレゼンテーションを定義していることと、将来の変更を簡単にするという事実に少し気になります。間接指示の別のレイヤーを追加したいと思います。セマンティクスを定義する独自のクラスを追加し、レイアウトプレゼンテーションを定義するBootstrapクラスを追加したいと思います。たとえば、次のように

<div class="main-block"> 
    <div class="side-bar">  
    </div> 
    <div class="content-area"> 
    </div> 
    </div> 

と私の対応以下のファイル...あなたが「単にクラス名を含めて、別のクラスにクラスのすべてのプロパティを埋め込むことができます

@import "twitter/bootstrap"; 
.main-block { .row-fluid } 
.side-bar { .span3 } 
.content-area { .span9 } 

少ないドキュメントの状態そのプロパティの1」、それが動作するはずのように見えるので、私はエラーを取得しています：

.row-fluid is undefined

は、私が行方不明です何かありますか？それともこれについてもっと良い方法がありますか？これは、less-rails-bootstrap gemを使ったrails 3.2プロジェクトにあります。

Answer 1

もう少し複雑です。あなたが言及しているのは、本質的に「ミックスイン」がすべてであることです。まず、エラーを解決しましょう。ちょっとしたことから、 "カスタム"無しのファイルをコンパイルしようとしていることと、ページの上部にvariables.lessとmixins.lessファイルを@importしていないことが分かりました。あれは正しいですか？もしそうなら、期待どおりにコンパイルするコードを取得するかどうかを確認してください。

ただし、コンパイルするコードを取得すると、新しい問題があることがわかります。この特定のケースでは、.span以外の名前を使用しようとすると、グリッドミックスインのアトリビュートセレクタによって適用されるスタイル設定、つまり[class*="span"]が失われます。コンパイルされ、それは次のようになります。

[class*="span"] { float: left; margin-left: 20px; } 
.row-fluid [class*="span"] {} 
.row-fluid [class*="span"]:first-child { margin-left: 0; } 

したがって、この場合の属性セレクタは、「スパン」で始まる任意のクラスに自分のスタイルを適用します。ここで

はあなたのために良いかもしれないオプションのカップルです：

1）カスタムクラス名べき仕事

<div class="row main-block"> 
    <div class="span-side-bar"> 
    </div> 
    <div class="span-content-area"> 
    </div> 
</div> 

2）と、複数を使用する前に、単語「スパン」を追加クラスはになります。しかしネイティブグリッドクラスのスタイルを無効にするカスタムクラスにスタイルを適用しない場合のみ：

<div class="row main-block"> 
    <div class="span3 side-bar"> 
    </div> 
    <div class="span9 content-area"> 
    </div> 
</div> 

3）私は、デフォルトのブートストラップグリッドシステムを維持するために必要な少しの余分なマークアップで暮らすことをお勧めします。現在の名前の変更は素晴らしいですが、将来のアップデートでマージすることを望むなら、私が残したいミックスはグリッドです。

<div class="row"> 
    <div class="span3"> 
     <div class="side-bar"> 
     </div>  
    </div> 
    <div class="span9"> 
     <div class="content-area"> 
     </div>  
    </div> 
    </div>