広い幅がSASS

Question

を使用して適用されていない私は、次のSCSSコードをしている：

@import "core-navigation"; 
$sidebar-extend-img-width: 12px; 
$sidebar-nav-item-height: 85px; 
$sidebar-nav-item-padding: 10px 10px 10px 10px; 

.re-core-nav-menu-wide { 
    width: $core-nav-width-wide; 
    @extend .re-core-nav-menu; 
} 

.re-core-nav-menu { 
    margin: 0; 
    padding: 0; 
    width: $core-nav-width; 
    background-image: $core-nav-background-image; 
    text-align: center; 
    height: 100%; 
    position: fixed; 
    overflow: auto; 

    .helper { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    } 

    a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    } 

    a:hover, 
    a:focus{ 
    text-decoration: none; 
    color:inherit; 
    } 

    .sidebar-nav-container { 
    background: transparent; 
    position: fixed; 
    width: $core-nav-width; 
    text-align: center; 
    } 

    .sidebar-nav-container-settings { 
    @extend .sidebar-nav-container; 
    bottom: 0; 
    } 

    .sidebar-nav-item { 
    padding: $sidebar-nav-item-padding; 
    height: $sidebar-nav-item-height; 
    } 

    .sidebar-nav-item.sidebar-logo { 
    height: 110px; 
    } 

    .sidebar-nav-item.sidebar-expand-contract-icon { 
    text-align: initial; 
    height: auto; 

    img { 
     vertical-align: top; 
    } 
    } 
} 

_core-navigation.scss：私は私のdivにre-core-nav-menu-wideクラスを適用しかし

$core-nav-width: 100px; 
$core-nav-width-wide: 263px; 
$core-nav-background-color: #f1f1f1; 
$core-nav-background-image: linear-gradient(0deg, #20C0BF 0%, #1DC4F0 52%, #7067CF 100%); 

私が手100px幅は263px幅ではありません。私は.core-nav-width-wideでコマンドを再配置しようとしましたが、結果は同じです。ここでコンパイルされたCSSは次のとおりです。http://pastebin.com/6y1GScTT

敬具あなたの現在のコードは、以下のCSSにコンパイルされます

Answer 1

：

.re-core-nav-menu-wide { 
    width: 263px; 
} 
.re-core-nav-menu, .re-core-nav-menu-wide { 
    margin: 0; 
    padding: 0; 
    width: 100px; 
    background-image: linear-gradient(0deg, #20C0BF 0%, #1DC4F0 52%, #7067CF 100%); 
    text-align: center; 
    height: 100%; 
    position: fixed; 
    overflow: auto; 
} 

あなたが設定widthがあり見ることができるように.re-core-nav-menu-wideセレクタと.re-core-nav-menu, .re-core-nav-menu-wideを持つセレクタの両方です。 どちらもクラスセレクタで、セレクタには1つのクラスしかないので、と同じ特異性があります。したがって、後でCSSファイルにあるwidthの設定が優先され、width: 100pxしか得られません。

---

解決方法1：

、問題を解決する最後のおサスコードで.re-core-nav-menu-wideルールセットを移動したり、より具体的なセレクタを使用します。

解決策2：

別の解決策は、.re-core-nav-menuセレクタの下に入れ子にすることによって.re-core-nav-menu-wideセレクタを形成するであろう。

このアプローチでは、ドキュメント内のどこかにワイドメニューのルールセットを置くよりも読みやすくなります。

.re-core-nav-menu { 
    width: $core-nav-width; 
    /* other stuff */ 

    &-wide { 
    width: $core-nav-width-wide; 
    @extend .re-core-nav-menu; 
    } 
    /* other stuff */ 
} 

Answer 2

注文事項を示します。 SASSは、定義されたのと同じ順序でCSSを生成するので、.scssファイルにre-core-nav-menuの前にre-core-nav-menu-wideを入れると、re-core-nav-menuのプロパティはre-core-nav-menu-wideのプロパティを上書きします。

Iは