Adding the gutter width to an element’s span (with Sass)

The Gridset Sass mixins are great, but you may want to build something more detailed. This is where the Functions can be a big help. For example, say you want to make an element span the first two columns, plus the gutter width. This intended width is actually the same measure as the left margin of the third column. So using the @gs-marginleft@ function, you can output this measure for any CSS property:

.element {
  width: gs-marginleft(d, 3, false, true);
}

In this example, we are calling the left margin of column 3, and adding the unit of measure too (%). Here are the properties for the @gs-marginleft@ function:

gs-marginleft(prefix, start, (container start, container end), display unit)

You can also use these functions multiple times for a property to pinpoint the exact measure you need. Back to our example, you might want your element to span column 2 plus the gutter. To find this measure, you need the left margin of column 3 (as before), but this time we need to subtract the left margin of column two, so our SCSS looks like this:

.element {
  width: #{(gs-marginleft(d, 3, false, false) - gs-marginleft(d, 2, false, false)) + '%'};
}

The display unit property is set to false on these two function calls, so that we can use them as numbers, and then we add the unit (%) back in at the end.

For more info about the Gridset Sass functions, check out the documentation: https://gridsetapp.com/documentation/sass/