sass-pattern

A list of mixins to ease you from of the pain of repeating same code, and help you focusing on styling.

Create a button:

.button-primary {
    @include Button {
        border: 1px solid #ccc;
        background: #fff;
        padding: 1rem;
        font-size: 1.5rem;
    };
}

Reset style:

@include Reset {
    body {
        @include SansSerif;
        @include Smoothing;
    }
    a {
        text-decoration: none;
    }
};

Create a Media Object:

.status {
    @include Media(
        $left: '.status-avatar',
        $right: '.status-content',
        $gutter: '20px'
    );
}

More examples:

• in English
• 中文版