Увеличенная ширина не применяется с использованием 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:

$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%); 

Однако, когда я применяю re-core-nav-menu-wide класс моего DIV я получаю Ширина 100px не 263px. Я попытался изменить команды в .core-nav-width-wide, но результат тот же. Вот скомпилированный CSS: http://pastebin.com/6y1GScTT

С наилучшими пожеланиями

Answer 1

Ваш текущий код будет компилироваться в следующий CSS:

.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. Оба класса селекторы только с одним классом в селекторе, и поэтому они имеют одинаковую специфичность. Таким образом выигрывает width, который присутствует в CSS-файле, и поэтому вы получаете только width: 100px.

---

Решение 1:

Чтобы решить эту проблему, переместите .re-core-nav-menu-wide набор правил в коде Сасс до конца или использовать более конкретный селектор.

Раствор 2:

Другим решением было бы, чтобы сформировать селектор .re-core-nav-menu-wide гнездящимися его под селектором .re-core-nav-menu.

Некоторые пользователи могут предпочесть этот подход, поскольку вложение делает его более читаемым, чем размещение набора правил для широкого меню в другом месте документа.

.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 в том же порядке, что и заданный, помещая re-core-nav-menu-wide до re-core-nav-menu в .scss-файл, в результате свойства re-core-nav-menu переопределяют свойства re-core-nav-menu-wide.

Я зафиксировал это путем изменения порядка к

.re-core-nav-menu {} 

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