Skip to content

Instantly share code, notes, and snippets.

@samme
Last active December 21, 2015 16:48
Show Gist options
  • Save samme/6335783 to your computer and use it in GitHub Desktop.
Save samme/6335783 to your computer and use it in GitHub Desktop.
Column-grid-background mixin for Compass. In some cases it seems more accurate than http://compass-style.org/reference/compass/layout/grid_background/#mixin-column-grid-background​​​, and the output is smaller.
@mixin column-grid-background(
$total : null, // unused
$column : $grid-background-column-width,
$gutter : $grid-background-gutter-width,
$offset : $grid-background-offset,
$column-color : $grid-background-column-color,
$gutter-color : $grid-background-gutter-color
) {
$column-stop: 100% * $column / ($column + $gutter);
@include background-image(linear-gradient(left, $column-color, $column-color $column-stop, $gutter-color $column-stop, $gutter-color));
background: {
position: $offset 0;
repeat: repeat;
size: $column + $gutter auto;
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment