Question

我是SASS的新手，我想知道两种不同风格的顶级酒吧造型的最佳方法是什么。使用SASS的最佳做法是什么？这个问题确实适用于从内置的Foundation _settings.scss工作表中设置任何内容的唯一实例。我已经取消注释并对某些项进行了更改，只要您希望该组件的所有实例都是统一的，但只要您有一个组件的两个独特样式版本，我该怎么办？

Answer 1

同意 （...与您的评论。有一个upvote！）

很难找出这种信息，这可能真的是因为它有点难以做到。并非不可能，但并不容易。

全球SASS / SCSS变化只是：全球。因此，虽然在.top-bar中全局更改_settings.scss样式很容易，但是覆盖单个元素实例已经证明是棘手的。独立设置的两个.top-bar是棘手的，而不是使用全局变量解决方案来完成。

明显的，纯粹的CSS方式是为每个菜单添加一个ID（我不喜欢ID，但是由于它们具有几乎不可构建的特性，它们在这个实例中符合要求），然后你应该能够通过简单地使每个规则特定足够来覆盖基本.top-bar样式来设置每个菜单的样式。我正在做这件事。到现在为止还挺好。

这是我的SCSS：

/* ==================
    Page Head Styles
    ================== */
#utility-nav {
    display: block;
    width: 100%;
    top:0;
    width: 100%;
    .top-bar.utility {
    background-color: white;
    margin: 0;
    height: 29px;
    a {
        line-height: 29px;
        height:29px;
        padding: 0 auto;
        color: #777;
        background-color: white;
        font-size: 14px;
        &:hover {
            color: #777;
            background-color: #f2f2f2;
        }
    }
}
    .top-bar-section {
        max-width: 1170px;
        margin: auto;
    }
}

呈现给这个CSS：

#utility-nav {
  display: block;
  width: 100%;
  top: 0;
  width: 100%; }
  #utility-nav .top-bar.utility {
    background-color: white;
    margin: 0;
    height: 29px; }
    #utility-nav .top-bar.utility a {
      line-height: 29px;
      height: 29px;
      padding: 0 auto;
      color: #777;
      background-color: white;
      font-size: 14px; }
      #utility-nav .top-bar.utility a:hover {
        color: #777;
        background-color: #f2f2f2; }
  #utility-nav .top-bar-section {
    max-width: 1170px;
    margin: auto; }

以下是它附加的HTML：

<!--
    Top Utility Menu
-->
<div id="utility-nav">
<nav class="top-bar utility show-for-large-up" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"></li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Careers</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Sign In</a></li>
    </ul>
  </section>
</nav>

</div>
<!--
    End Top Utility Menu
-->

所以，这是 ONE 菜单（最顶层的'Utility'菜单）被覆盖。现在就开始使用第二个#main导航菜单。

简而言之，它们并不容易。如果我可以利用SASS mixins来创建一个.top-bar-2类并且只有它，那就更好了，但它can't be done at this time。

使用SASS在单个页面上设置多个Foundation顶部栏的样式

1 个答案:

这是我的SCSS：

呈现给这个CSS：

以下是它附加的HTML：