Extending Pure components using pre-processors.

mixins.scss

@mixin pure-form {
    input {
        padding: 0.5em 0.6em;
        display: inline-block;
        border: 1px solid #ccc;
        font-size: 0.8em;
        box-shadow: inset 0 1px 3px #ddd;
        border-radius: 4px;
        -webkit-transition: 0.3s linear border;
        -moz-transition: 0.3s linear border;
        -ms-transition: 0.3s linear border;
        -o-transition: 0.3s linear border;
        transition: 0.3s linear border;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

// <div class="form">
//     <input type="text">I am an input element</input>
// </div>
.form {
    //The input will be styled like a .pure-form input.
    @include pure-form;
}

styles.scss

//This pulls in a file called _pure.scss. It's a duplicate of pure.css, 
//but just renamed with an .scss extension.
@import "bower_components/pure/pure";

button {
    //allows us to extend pure classes without having pure-* in HTML.
    @extend .pure-button;
    background: green;
    color: yellow;
}