Styling multiple Foundation top-bars on a single page using SASS - sass

Question

I'm fairly new with SASS and I am wondering what is the best method for styling two different top-bars with different styles. What is the best practice using SASS? This question really applies to styling unique instances of anything from the built-in Foundation _settings.scss sheet. I have uncommented and made changes to certain items, and that works just fine as long as you want all instances of that component to be uniform, but when there are two uniquely styled versions of a single component, what should I do?

Answer 1

Agreed (…with your comment. Have an upvote!)
It's difficult to ferret out this kind of information, and that might really be because it's somewhat difficult to do. Not impossible, but not easy.
Global SASS/SCSS changes are just that: global. So while it's easy enough to change the .top-bar styles globally in _settings.scss, overriding individual element instances have proven tricky. Two .top-bars styled independently is tricky, and not to be accomplished using the global variable solutions.
The obvious, and purely CSS, way is to add an ID to each menu (I don't like IDs, but they fit the bill in this instance because of their near-indestructable specificity), and then you should be able to style each menu by simply making each rule specific enough to override the base .top-bar styles. I am in the process of doing this exact thing. So far, so good.
Here's my 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;
}
}
Which renders to this 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; }
And here's the HTML it's attaching to:
<!--
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"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Careers</li>
<li>Contact Us</li>
<li>Blog</li>
<li>Sign In</li>
</ul>
</section>
</nav>
</div>
<!--
End Top Utility Menu
-->
So, that's ONE menu (the very top 'Utility' menu) overridden. Working on the second, #main navigation menu now.
In short, they don't make it easy. It would be nice if I could leverage SASS mixins to create a .top-bar-2 class and just have at it, but it can't be done at this time.