使用SASS在单个页面上设计多个基础顶杆

我是SASS的新手，我想知道用什么样的方法来设计两个不同风格的顶部酒吧是最好的。使用SASS的最佳实践是什么？这个问题确实适用于从内置的基础设施Stuts.SCSS表中设计任何独特的实例。我已经取消了注释并对某些项目进行了更改，只要您希望该组件的所有实例都是统一的，就可以了，但是当一个组件有两个样式独特的版本时，我该怎么办呢？

同意（…同意您的意见。请投赞成票！）

很难找出这类信息，这可能真的是因为这有点困难。不是不可能，但不容易

全球SASS/SCSS变化只是：全球。因此，虽然在

\u settings.scs

中全局更改

.top bar

样式很容易，但覆盖单个元素实例却很棘手。两个

。独立设置样式的顶栏

很棘手，不能使用全局变量解决方案来完成

显而易见的，也是纯粹的CSS，方法是在每个菜单中添加一个ID（我不喜欢ID，但在本例中它们符合要求，因为它们几乎是不可摧毁的特性），然后您应该能够通过简单地使每个规则特定于足够的覆盖基本

。顶部栏
样式来设置每个菜单的样式。我正在做这件事。到目前为止，一切顺利

这是我的SCS：
将以下内容呈现给此CSS：
下面是它附加到的HTML：












因此，有一个菜单（最上面的“实用程序”菜单）被覆盖。正在使用第二个#主导航菜单

简言之，他们并没有让事情变得容易。如果我能利用SASS混音来创建一个<代码> >顶部BAR-2 类，那就好了。但是，
我不知道为什么我已经被标记为“否定”，因为我已经通过基础文档做了大量的搜索，并且没有找到关于这个最佳实践的问题的答案。投票被否决是因为这是一个低质量的问题（OP是否提供了任何代码或显示了他们试图做什么？）。OP还要求提供“最佳实践”，这通常属于“基于意见”的领域，这与SO无关。理解……有点像。虽然对“最佳实践”的讨论可以被视为是基于意见的，但我们仍然可以承认，在许多领域，“最佳实践”确实存在。op的问题非常具体，寻求sass/基金会的“最佳实践”，考虑到这是一个我正在研究的主题，这一切对我来说都很好。最后，关于最佳实践的查询没有太多代码可供显示，但我已经放弃了这样一个概念，即对话可以说是基于观点的。无意冒犯。
/* ==================
    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;
    }
}

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

<!--
    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
-->