Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul>
  <li><a href="#">Foo</a></li>
  <li><a href="#">Bar</a></li>
  <li><a href="#">Baz</a></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

// Bonjour
// For simplicity i've just used one ul > li in this POC
//
// _template1.scss and _template2.scss would be switched by
// importing the corresponding NuGet Package into the Visual Studio
// project. In this POC just toggle between them using comments.
// 
// _design.scss would usually be empty, if not there are two cases:
// - extending the template by adding some stuff (as shown below)
// - overriding the template and completely changing the look
//
// For flexibility I would add sub-skins or partials (%nav & %nav-li) 
// This helps with different html structures (SP vs our own Navi)
// and you can easely override parts of the skin
// 
// We're having this skinning issue not only with the navigation 
// but other areas aswell (content styling and more so the footer)
//
// I guess that's about it :)

ul { list-style: outside none none;  margin: 0; padding: 0; }



// --- _coreMixins.scss -------------------------
// would handle functionallity such as dropdown/megamenu  
%nav-core {
  // reset, out of scope  
  list-style: outside none none;  margin: 0; padding: 0;
}
%nav-li-core {
  padding: 5px 20px;
}




// --- _template1.scss -------------------------
%nav {
  padding: 20px 0;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}
%nav-li {
  display: block;
}




// --- _template2.scss -------------------------
/*%nav {
  padding: 10px;
  background:  #efefef;
}
%nav-li {
  display: inline;
}*/





// --- _design.scss -------------------------
// this works for simple stuff, but what if we use _template1.scss
// but want a completely different navigation?
%nav {
  a {
    color: green;
  }
}
%nav-li {
  &:hover {
    background: #E86EA4;
  }
}




// --- _core.scss -------------------------
// pulls the template and design together
// handles functionallity such as modal/megamenu mode etc...
// provides the css selectors
ul {
  @extend %nav-core;
  @extend %nav !optional;
}
li {
  @extend %nav-li-core;
  @extend %nav-li !optional;
}

SassMeister-output.css

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

li {
  padding: 5px 20px;
}

ul {
  padding: 20px 0;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

li {
  display: block;
}

/*%nav {
  padding: 10px;
  background:  #efefef;
}
%nav-li {
  display: inline;
}*/
ul a {
  color: green;
}

li:hover {
  background: #E86EA4;
}

SassMeister-rendered.html

<ul>
  <li><a href="#">Foo</a></li>
  <li><a href="#">Bar</a></li>
  <li><a href="#">Baz</a></li>
</ul>