Make a span() function for blueprint that returns the width in pixels of $n columns.
This commit is contained in:
parent
068ee421f1
commit
d67a43ad4b
@ -108,16 +108,20 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns
|
|||||||
@include column-base($last);
|
@include column-base($last);
|
||||||
@include span($n); }
|
@include span($n); }
|
||||||
|
|
||||||
|
// Return the width of `$n` columns.
|
||||||
|
@function span($n) {
|
||||||
|
@return $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1);
|
||||||
|
}
|
||||||
|
|
||||||
// Set only the width of an element to align it with the grid.
|
// Set only the width of an element to align it with the grid.
|
||||||
// Most of the time you'll want to use `+column` instead.
|
// Most of the time you'll want to use `+column` instead.
|
||||||
//
|
//
|
||||||
// This mixin is especially useful for aligning tables to the grid.
|
// This mixin is especially useful for aligning tables to the grid.
|
||||||
@mixin span($n, $override: false) {
|
@mixin span($n, $important: false) {
|
||||||
$width: $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1);
|
@if $important {
|
||||||
@if $override {
|
width: span($n) !important; }
|
||||||
width: $width !important; }
|
|
||||||
@else {
|
@else {
|
||||||
width: $width; } }
|
width: span($n); } }
|
||||||
|
|
||||||
// The basic set of styles needed to make an element
|
// The basic set of styles needed to make an element
|
||||||
// behave like a column:
|
// behave like a column:
|
||||||
|
Loading…
Reference in New Issue
Block a user