Skip to content

Instantly share code, notes, and snippets.

@torkiljohnsen

torkiljohnsen/_nav--horizontal.scss

Last active December 14, 2015 08:49
Download ZIP

Revisions

  1. Torkil Johnsen revised this gist Feb 28, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,12 +4,12 @@
    </head>
    <body>

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

    <ul class="nav--horizontal">
    <ul class="nav nav--horizontal">
    <li>Menu item in horizontal menu</li>
    <li>Menu item in horizontal menu</li>
    </ul>
  2. Torkil Johnsen revised this gist Feb 28, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,12 +4,12 @@
    </head>
    <body>

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

    <ul class="nav nav--horizontal">
    <ul class="nav--horizontal">
    <li>Menu item in horizontal menu</li>
    <li>Menu item in horizontal menu</li>
    </ul>
  3. Torkil Johnsen revised this gist Feb 28, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions site.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,8 @@
    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
  4. Torkil Johnsen created this gist Feb 28, 2013.
    5 changes: 5 additions & 0 deletions _nav--horizontal.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    @import 'nav'; // "Extending" .nav

    .nav--horizontal {
    /* horizontal nav is a variant of nav */
    }
    5 changes: 5 additions & 0 deletions _nav--vertical.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    @import 'nav'; // "Extending" .nav

    .nav--vertical {
    /* vertical nav is a variant of nav too */
    }
    3 changes: 3 additions & 0 deletions _nav.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    .nav {
    /* base class */
    }
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <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>
    14 changes: 14 additions & 0 deletions site.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    @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.
    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.
    */