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;
}

正如您所看到 {{1}中的 width 设置选择器和具有.re-core-nav-menu-wide的选择器。 两者都是类选择器 ，在选择器中只有一个类，因此它们具有 相同的特异性 。因此，CSS文件中稍后出现的.re-core-nav-menu, .re-core-nav-menu-wide设置会获胜，因此您只能获得width。

解决方案1：

要解决此问题，请将Sass代码中的width: 100px规则集移至末尾或使用更具体的选择器。

解决方案2：

另一种解决方案是通过将.re-core-nav-menu-wide选择器嵌套在.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，因此在。{1}}之前放置re-core-nav-menu-wide .scss文件会导致re-core-nav-menu的属性覆盖re-core-nav-menu的属性。

我通过将订单更改为

来解决此问题

re-core-nav-menu-wide

使用SASS不应用更宽的宽度

2 个答案: