mp3por mp3por - 10 days ago 6
Sass (Sass) Question

Wider width not being applied using SASS

I have the following scss code:

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


However when I apply the
re-core-nav-menu-wide
class to my div I get the 100px width not the 263px one. I have tried to rearrange the commands in .core-nav-width-wide however the result is the same. Here is the compiled CSS: http://pastebin.com/6y1GScTT

Best regards

Answer

Your current code will compile into the following 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;
}

As you can see there is a width setting in both the .re-core-nav-menu-wide selector and the one that has .re-core-nav-menu, .re-core-nav-menu-wide. Both are class selectors with just a single class in the selector and so they have the same specificity. Thus the width setting which is present later in the CSS file wins and so you get only width: 100px.


Solution 1:

To solve the problem, move the .re-core-nav-menu-wide ruleset in your Sass code to the end or use a more specific selector.

Solution 2:

Another solution would be to form the .re-core-nav-menu-wide selector by nesting it under the .re-core-nav-menu selector.

Some users may prefer this approach as the nesting makes it more readable than putting the ruleset for wide menu elsewhere in the document.

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

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