getchopstick/chopstick-boilerplate — pull request #26 by xavez (2014-04-05 12:23:30+00:00)
Title: Add @include block-skin mixin. See #19 and #14.

Proposal to add a `block-skin` mixin as noted in #19 and #14

Summary:
* Split global variable $border into `$border-width` and `$border-style`.
* Add a `block-skin` mixin to add a skin onto a block element. Default values are based on chopstick settings
* Make the alerts use the block-skin mixin.

Usage (variables between square brackets are optional):
@include block-skin([$bgcolor] [$fgcolor] [$block-radius] [$block-border-width] [$block-border-style])

You can simply do the following:

span.element {
display: block
@include block-skin;
}

Which will result in a block based on the default chopstick settings. You can override those settings:

span.element--alt {
display: inline-block;
@include block-skin(#FFF, #CCC, 0, 1px, dotted);
}

The `display` property was not included in the block-skin mixin because it would lead to code duplication. Most elements already have a display style of block by default, so it would be redundant. And chopstick is light-weight!