Simple example of SCSS @extend

This is an overly simple demonstration of the SCSS @extend operator to make a UL-LI-A navigation.

by thirdender

HTML

<script src="http://fonts.googleapis.com/css?family=Ubuntu"></script>
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/puppies">Puppies</a></li>
        <li><a href="/kittens">Kittens</a></li>
        <li><a href="/fishies">Fishies</a></li>
        <li><a href="/birdies">Birdies</a></li>
    </ul>
</nav>

SCSS

// This is the re-usable code. You can style something using the "links" class,
// or use the @extend operator to apply the styles later in your CSS (without
// needing to use the actual class in your HTML).
// The actual generated CSS selector (after SCSS runs) will look something like
// `.links, .links li, .links ul, nav ul, nav ul li, nav ul ul`.
// Details: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend
.links {
    &, & li, & ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

nav ul {
    // Now we can tell SCSS to add this selector to the .links selector so that
    // it gets the .links styles.
    // We could re-use the CSS from the .links selector as many times as we want,
    // for example, later in the page in the footer. It just needs the one line:
    // `@extend .links`.
    @extend .links;
    
    // And proceed to style the nav as we want.
    background: #ccc;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .1) inset;
    text-align: center;
    cursor: default;
    li, a {
        display: inline-block;
    }
    a {
        color: #333;
        text-decoration: none;
        padding: 3px;
        &:hover {
            background: #ddd;
            background: rgba(255, 255, 255, .4);
        }
    }
}

// Some additional styles to make the demo pretty.
body {
    margin: 0;
    font: 12px Ubuntu, Arial, sans-serif;
}