This is great, but more often than not we will need our color stops to align with a site’s grid system. How can we do that but also have an edge-to-edge appearance? Let’s combine some
calc(), and some math in a Sass mixin.
What do we need to know?
Our Sass mixin will need to know some baseline items. You can declare these with Sass variables.
Grid container size
We are matching Bootstrap’s 1140px default with our
Grid column amount
How many columns does your grid system contain in total?
When called, our mixin will expect two arguments, with additional optional arguments:
$cols: how many columns wide should the first color be?
$colorTwo: the second color in our left-to-right gradient.
$colorOne(optional): the first color in our left-to-right gradient. (we will defaults to transparent, since we will often only want a sidebar color)
$colSelector(optional): the column class your grid system uses (this example defaults to Bootstrap’s)
$rowSelector(optional): the row class your grid system uses (this example defaults to Bootstrap’s)
Our mixin performs some division to find out what percentage
$cols is of
$gridColumns. Then we multiply our
$container by this percentage to find where our first color stop should be.
$colPercent:$cols / $gridColumns;
$colWidth: $colPercent * $container;
Let’s call the mixin with some arguments and look at Sass, using plain english during both to better understand what is going on.
Let’s name our mixin fauxColumns. Remember our important arguments:
@mixin fauxColumns($cols, $colorTwo, $colorOne: transparent)
Let’s call the mixin and pass some values.
@include fauxColumns(9, #ff675b, #d2e6ea);
“I would like edge-to-edge colors, please. #d2e6ea should take up 9 of my grid’s 12 columns. #ff675b should take up the rest.”