このCSSルールはどのように動作させることができますか？

Question

私は、ブートストラップ列のページを書きましたが、私のクラスのいずれかが動作しません：

.serviceDetails { 

    .height { 
    line-height: 12px; 
    margin-top: 8px; 
    } 

    p.text , span.text { 
    font-size:11px; 
    } 

    .icon { 
    border:11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 
} 

これは私のhtmlです：.iconクラスが動作しないいくつかの理由

<section class="serviceDetails"> 
     <div class="row"> 
     <div class="col-md-3 col-xs-12"> 
        <div class="col-md-2 hidden-xs icon"> 
        <i class="fa fa-bandcamp" aria-hidden="true"></i> 
     </div> 
.... 

？詳細：

Answer 1

codepenネストの外であなたのCSSを取るには、何が必要ありません

.icon { 
    border: solid pink 11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 

http://codepen.io/anon/pen/dOYgaV

編集：追加色と、国境にcodepenにも変更プリプロセッサ設定を埋めます。

上に書いSASSも問題を解決するだろうプリコンパイル

.serviceDetails { 

    .height { 
    line-height: 12px; 
    margin-top: 8px; 
    } 

    p.text , span.text { 
    font-size:11px; 
    } 

.icon { 
    border: solid pink 11px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 

} 

、http://www.sassmeister.com/ - オンラインコンパイラ http://sass-lang.com/ - SASSドキュメント

これは、通常のCSSが内部にネストクラス規則にあなたを許可していないという事実によるものですsassが入れ子をサポートしているクラスや、他の多くのクールな機能をサポートしています。