When using the Neat framework, the column's gutter automatically adjusts to the window size (as is expected from grid frameworks, of course). In my current project I'd like to use the gutter-width ($gutter) as top or bottom padding for some elements.
Using the $gutter variable directly works, except that the padding won't be adjusted when downsizing the view port.
Does anyone have a solution for this?
Well, I was a little bit too fast with asking this question. I did a little browsing through the Neat code, and apparently using
padding: flex-gutter();
works.
Does anyone know if this has any downsides?
Edit: Well, I found the downside. flex-gutter(), or using the bourbon function pad () (same result except for padding), defines the padding/margin around 2.3%. Problem is that, when you'll view your grid on a large screen, the padding will get huge (while the gutter on your grid holds on to a maximum of 25px.
So I kinda made my own max-margin:
margin-bottom: 25px;
@media (max-width: 1100px) { margin-bottom: flex-gutter();}
First line defines the max margin, the second line sets flex-gutter if your viewport is < 1100px (my max grid size for Neat).
Would love to hear if I can implement this in a sass function!