Documentation

sass-pattern

The 'devDependency' for quick Sass development.

Install

bower install sass-pattern

npm install sass-pattern

@import "sass-pattern";

Arrange

These three objects helps you achieve the most common design layouts.

// API:
@mixin Media($left, $right, $gutter: 0, $atRoot: true)

@mixin Flag($left, $right, $align: middle, $gutter: 0, $atRoot: true)

@mixin Balance($left, $right, $height: 0, $atRoot: true)

Media Object

The media object is an image to the left, with descriptive content to the right.

via http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Douban Community:

<div class="status">
    <div class="status-author"></div>
    <div class="status-content"></div>
</div>

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

Flag Object

... Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.

via http://csswizardry.com/2013/05/the-flag-object/

Part of user's profile in Douban:

<div class="collection">
    <span class="collection-status"></span>
    <ul class="collection-items"></div>
</div>

.collection {
    @include Flag(
        $left: '.collection-status',
        $right: '.collection-items',
        $gutter: 5px
    );
}

Balance Object

This time, the two elements being arranged are 'floated', one left, one right. But you still have the control of their vertical alignment.

The header of a story in Douban Music:

<header class="event-hd">
    <h1 class="event-title"></h1>
    <div class="event-share"></div>
</header>

.event-hd {
    @include Balance(
        $left: '.event-title',
        $right: '.event-share'
    );
}

Button

// API
@mixin Button {
    @content;
}
%Button

Style a button without worrying about cross-device style differences.

<button class="button-login">Login</button>
<a class="button-login">Login</a>
<span class="button-login">Login</span>

.button-login {
    @extend %Button;
    
    border: 1px solid darken($blue, 6%);
    background: linear-gradient(top, lighten($blue, 6%) 0%, $blue 100%);
    &:hover {
        background: linear-gradient(top, lighten($blue, 6%) 10%, $blue 100%);
    }
    &:active {
        background: $blue;
    }
}

Typography

// API
@mixin SansSerif
%SansSerif

@mixin Smoothing
%Smoothing

@mixin Kerning
%Kerning

// One-line truncating, with ellipsis behind
@mixin Ellipsis
%Ellipsis

// Multiline truncating, with ellipsis behind
@mixin Clamp($lines)

Retina

@mixin Retina($img, $img2x, $bgSize: cover)

@mixin HalfPixelBorder($color, $dir)

.sprite {
    @include Retina('img.png', 'img@2x.png', 100px 50px);
}

Shape

@mixin Rect($width, $height, $radius: 0)

@mixin Square($length, $radius: 0)

@mixin Circle($diameter)

// auto scaling
@mixin Ratio($ratio)

Reset

@mixin ResetElement

@mixin ResetMobile

// arguments $h1 ~ $h6 are all optional
@mixin ResetTitle($h1, $h2, $h3, $h4, $h5, $h6) {
    @content;
}

@mixin Reset {
    @content;
}