1

What I would like to do is loop through my media queries and columns in sass. For example, I have generated the column classes with the following code:

$__grid--columns: 12;
$__grid--breakpoints: (
    small:0,
    medium:667px,
    large:1024px,
    xlarge:1200px
);
$__grid--gutters: (
    small:30px,
    medium:30px,
    large:30px
);

@each $key, $value in $__grid--breakpoints {
    @for $i from 1 through $__grid--columns {
        &.#{$key}-#{$i} {
            width: ( (100% / $__grid--columns) * $i);
        }
    }
}

Also Codepen link is here: https://codepen.io/Jesders88/project/editor/bd9e637b08b6c1c907c7fbe8211192f9

I would like to use sass maps which I am above, and it works fine. Where I am getting hung up is the media queries. I don't want to statically code 4 if statements for my sass map. It needs to be done dynamically. Basically what it boils down to is I want to have a set of classes cell-small through cell-xlarge in this case. If I add a breakpoint the mixin needs to accommodate that. Basically it needs to resemble bootstrap or foundation. Below is what I am thinking.

<div class="cell cell-sm-12 cell-lg-4">
    @content Goes Here.
</div>

Basically I need a way to break at the small breakpoint to make 12 columns and only have 4 on large screens. Again, I don't want to have loop through the breakpoints and have to statically say

@if(breakpoint == sm){ do this }

The sass map will be the definition of the breakpoints.

If this doesn't make sense, feel free to ask questions. Also, feel free to fork my pen and edit if you choose. Thanks for the help.

EXAMPLE OF WHAT I'D LIKE

<div class="container">
    <div class="row gutter">
        <div class="cell small-12 large-4">
            Content Goes HERE
        </div>
    </div>
</div>

CSS

.gutter {
 > .cell { margin-left://GENERATED FROM SASS MAP }
 > .cell .small-1 { //GENERATED WIDTH }
 > .cell .small-2 { //GENERATED WIDTH }
 > .cell .small-3 { //GENERATED WIDTH }
 > .cell .small-4 { //GENERATED WIDTH }
 > .cell .small-5 { //GENERATED WIDTH }
 > .cell .small-6 { //GENERATED WIDTH }
 > .cell .large-1 { //GENERATED WIDTH }
 > .cell .large-2 { //GENERATED WIDTH }
 > .cell .large-3 { //GENERATED WIDTH }
 > .cell .large-4 { //GENERATED WIDTH }
 > .cell .large-5 { //GENERATED WIDTH }
 > .cell .large-6 { //GENERATED WIDTH }
     //REST OF THE VALUES ....
}
justin.esders
  • 1,316
  • 4
  • 12
  • 28
  • I've read this several times and I still can't understand what you're asking. Could you update the question with an example of the finished CSS you'd like to output? – wiiiiilllllll Jul 13 '18 at 14:57
  • Updated question. Notice how there is a row with a gutter. Also, if you are on large screens each cell will be 4 columns wide and then when you get to small screens the columns will be 12 columns wide or 100% in this case since I have a 12 column grid. – justin.esders Jul 13 '18 at 15:04
  • Sorry, are you able to give us an example of what the CSS would look like in the finished product? Not just the HTML. – wiiiiilllllll Jul 13 '18 at 15:10
  • Added another snippet above. I hope that helps. – justin.esders Jul 13 '18 at 15:31
  • I've made a start here: https://www.sassmeister.com/gist/7c45536412e4e78a981ccad56794e6b0 but I'll be honest I'm still not sure if I understand the requirement. If your columns are using percentage widths, surely a `.small-6` will be the same percentage as a `large-6` ? – wiiiiilllllll Jul 13 '18 at 15:41
  • I want to recreate the bootstrap grid system basically, complete with gutters and columns. I will be changing alot, but don't know how bootstrap sets up there col-md-# and col-lg-# classes. Sorry I know it is hard to understand. It is equally as hard to explain :/. – justin.esders Jul 13 '18 at 15:45
  • I looked at your implementation on sassmeister and it looks exactly what I need. Only thing missing is gutters. Still not sure how to go about that one. Also, what exactly does the @root directive do in this case? – justin.esders Jul 13 '18 at 15:50
  • Seems like @root actually does nothing - Sassmeister complained if I didn't use it, but actually it's pointless! If I figure out the gutters I'll add an answer. – wiiiiilllllll Jul 13 '18 at 16:01

0 Answers0