torkiljohnsen/_nav--horizontal.scss

## _nav--horizontal.scss
@import 'nav'; // "Extending" .nav

.nav--horizontal {
  /* horizontal nav is a variant of nav */
}

## _nav--vertical.scss
@import 'nav'; // "Extending" .nav

.nav--vertical {
  /* vertical nav is a variant of nav too */
}

## _nav.scss
.nav {
  /* base class */
}

## index.html
<html>
  <head>
    <link href="site.css" rel="stylesheet" />
  </head>
  <body>

  <ul class="nav  nav--vertical">
      <li>Menu item in vertical menu</li>
      <li>Menu item in vertical menu</li>
    </ul>

  <ul class="nav  nav--horizontal">
    <li>Menu item in horizontal menu</li>
    <li>Menu item in horizontal menu</li>
  </ul>

</body>
</html>

## site.scss
@import 'nav--horizontal';
@import 'nav--vertical';

/*
  The output here will show .nav twice in the compiled css.

  Challenge here is that variants of nav should be independent and should
  not know about one another, but should still avoid importing nav twice.

  Example scenario:
  -----------------
  Mr Widget Maker may make widgetA, while Dr Widget Master makes widgetB.
  They use two different .nav variants. Mrs Clever Siteowner decides to
  put both widgetA and widgetB on the same website, thus .nav will be
  imported twice in this case.
*/
	@import 'nav'; // "Extending" .nav

	.nav--horizontal {
	/* horizontal nav is a variant of nav */
	}
	@import 'nav'; // "Extending" .nav

	.nav--vertical {
	/* vertical nav is a variant of nav too */
	}
	<html>
	<head>
	<link href="site.css" rel="stylesheet" />
	</head>
	<body>

	<ul class="nav nav--vertical">
	<li>Menu item in vertical menu</li>
	<li>Menu item in vertical menu</li>
	</ul>

	<ul class="nav nav--horizontal">
	<li>Menu item in horizontal menu</li>
	<li>Menu item in horizontal menu</li>
	</ul>

	</body>
	</html>
	@import 'nav--horizontal';
	@import 'nav--vertical';

	/*
	The output here will show .nav twice in the compiled css.

	Challenge here is that variants of nav should be independent and should
	not know about one another, but should still avoid importing nav twice.

	Example scenario:
	-----------------
	Mr Widget Maker may make widgetA, while Dr Widget Master makes widgetB.
	They use two different .nav variants. Mrs Clever Siteowner decides to
	put both widgetA and widgetB on the same website, thus .nav will be
	imported twice in this case.
	*/