Making grid with mixins

Question

I found and changed a code a bit so I could use it but I am missing one thing .

$map: (1025: 12,768: 6 ,320: 1);

@each $point , $columns in $map {
  @if $point == 320 {
    @for $i from 1 through $columns {
      @media (max-width: $point + px) {
        $equ: 100% / $i;

        .col-#{$i}-m {
          width: $equ;
        }
      }
    }
  }@else if $point == 1025 {
    @for $i from 1 through $columns {
      @media (min-width: $point + px) {
        $equ: 100% / $i;

        .col-#{$columns} {
          width: $equ;
        }

        .offset-#{$i} {
          margin-left: $equ;
        }
      }
    }
  }@else if $point == 768 {
    @for $i from 1 through $columns {
      @media (min-width: $point + px) and (max-width: 1024px) {
        $equ: 100% / $i;

        .col-#{$columns}-t {
          width: $equ;
        }

        .offset-#{$i}-t {
          margin-left: $equ;
        }
      }
    }
  }
}

This is my grid . I can't use bootstrap so I made my own. From this , I get this css. I will paste the css for desktop view because they work on the same principle.

@media (min-width: 1025px) {
  .col-1 {
    width: 100%; }
  .offset-1 {
    margin-left: 100%; } }

@media (min-width: 1025px) {
  .col-2 {
    width: 50%; }
  .offset-2 {
    margin-left: 50%; } }

@media (min-width: 1025px) {
  .col-3 {
    width: 33.33333%; }
  .offset-3 {
    margin-left: 33.33333%; } }

@media (min-width: 1025px) {
  .col-4 {
    width: 25%; }
  .offset-4 {
    margin-left: 25%; } }

@media (min-width: 1025px) {
  .col-5 {
    width: 20%; }
  .offset-5 {
    margin-left: 20%; } }

@media (min-width: 1025px) {
  .col-6 {
    width: 16.66667%; }
  .offset-6 {
    margin-left: 16.66667%; } }

@media (min-width: 1025px) {
  .col-7 {
    width: 14.28571%; }
  .offset-7 {
    margin-left: 14.28571%; } }

@media (min-width: 1025px) {
  .col-8 {
    width: 12.5%; }
  .offset-8 {
    margin-left: 12.5%; } }

@media (min-width: 1025px) {
  .col-9 {
    width: 11.11111%; }
  .offset-9 {
    margin-left: 11.11111%; } }

@media (min-width: 1025px) {
  .col-10 {
    width: 10%; }
  .offset-10 {
    margin-left: 10%; } }

@media (min-width: 1025px) {
  .col-11 {
    width: 9.09091%; }
  .offset-11 {
    margin-left: 9.09091%; } }

@media (min-width: 1025px) {
  .col-12 {
    width: 8.33333%; }
  .offset-12 {
    margin-left: 8.33333%; } }

I need the output to be reversed . For example the col-1 should be width: 8.33333%; or col-12 should be width: 100%; . Basically , I need to reverse the numbers but no matter how i try , always the same ..

@Scoots I have to. Think of it like a homework or something like that.. — Bojan Kolano, Nov 30 '18 at 08:05

score 2 · Accepted Answer · answered Nov 29 '18 at 16:16

2

When you do this:

$equ: 100% / $i;

.col-#{$i}-m {
     width: $equ;
}

think about what the loop will result in. First i will be 1, 100% divided by 1 is 100%. Where as you'd want one to be 100%/numberofcols.

Something like this:

$equ: 100% / ($columns + 1 - $i);

.col-#{$i}-m {
     width: $equ;
}

answered Nov 29 '18 at 16:16

Oliver Orchard

562
1
4
15

Hey I tried it , but I don't quite get what I need. This way my columns are not really the width I need them to be . For example my col-6 is width: 14.28571%; It sohuld be 50% . As in half of the screen. But the numbering goes well now :) Any ideas ? – Bojan Kolano Nov 30 '18 at 08:00
1

Let me know if you need any more help with this, i'd be happy to help but seems you have resolved this yourself – Oliver Orchard Nov 30 '18 at 08:43

score 1 · Answer 2 · answered Nov 30 '18 at 08:23

1

After @Oliver Orchard gave me a hint , I managed to solve this thing . Here is the code :

@else if $point == 1025 {
    @for $i from 1 through $columns {
      @media (min-width: $point + px) {
        $equ: 100% / ($columns)*$i;

        .col-#{$i} {
          width: $equ;
        }

        .offset-#{$i} {
          margin-left: $equ;
        }
      }
    }
  }

Thanks for help !

answered Nov 30 '18 at 08:23

Bojan Kolano

253
3
19

1

@OliverOrchard Thanks ! The hint helped a lot :) Good job ! – Bojan Kolano Nov 30 '18 at 09:13

Making grid with mixins

2 Answers2