- This topic is empty.
-
AuthorPosts
-
July 14, 2014 at 6:32 pm #175427Keenan PayneParticipant
Hello everybody!
I am trying to create a mixin in SASS that is simple and easy-to-use for generating grids with and without gutters.
My mixin works great except for when I introduce gutters to it. By adding the
.gutters
class to a row, each column (except for the last column) have a left margin of 2%. However, I do not know how to calculate the proper width for these columns, since that is something that has to change because of the gutters.Here is an example of my code running: http://codepen.io/anon/pen/hDqfp
Here is the proper code that I need generated:
.column-1 { width: 6.25%; } .column-2 { width: 12.5%; } .column-3 { width: 18.75%; } .column-4 { width: 25%; } .column-5 { width: 31.25%; } .column-6 { width: 37.5%; } .column-7 { width: 43.75%; } .column-8 { width: 50%; } .column-9 { width: 56.25%; } .column-10 { width: 62.5%; } .column-11 { width: 68.75%; } .column-12 { width: 75%; } .column-13 { width: 81.25%; } .column-14 { width: 87.5%; } .column-15 { width: 93.75%; } .column-16 { width: 100%; } .gutters .column-1 { width: 4.375%; } .gutters .column-2 { width: 10.75%; } .gutters .column-3 { width: 17.125%; } .gutters .column-4 { width: 23.5%; } .gutters .column-5 { width: 29.875%; } .gutters .column-6 { width: 36.25%; } .gutters .column-7 { width: 42.625%; } .gutters .column-8 { width: 49.0%; } .gutters .column-9 { width: 55.375%; } .gutters .column-10 { width: 61.75%; } .gutters .column-11 { width: 68.125%; } .gutters .column-12 { width: 74.5%; } .gutters .column-13 { width: 80.875%; } .gutters .column-14 { width: 87.25%; } .gutters .column-15 { width: 93.625%; } .gutters .column-16 { width: 100%; }
However, as you can see, that is not happening because the equation in my mixin is incorrect. Can anyone please point me in the right direction, this is wrecking my brain…
July 15, 2014 at 2:50 am #175447Paulie_DMemberHave you seen this?
https://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/
July 15, 2014 at 11:54 am #175492Keenan PayneParticipant@MattDiMu Thank you so much for the help with that and for the link. I was really struggling with this and that’s just what I needed.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.