media querie scss

Question

I’m learning Sass and I’m doing the grid based on the bootstrap, with different classes for each screen width size, but I don’t understand how it does it in Sass in a smaller way, I don’t want it to look like this

@media (min-width: 576px) {
.container {
max-width: 540px;
}
.col-sm-1  {max-width: 8.333333%;}
.col-sm-2  {max-width: 16.666667%}
.col-sm-3  {max-width: 25%;}
.col-sm-4  {max-width: 33.333333%;}
.col-sm-5  {max-width: 41.666667%;}
.col-sm-6  {max-width: 50%;}
.col-sm-7  {max-width: 58.333333%;}
.col-sm-8  {max-width: 66.666667%;}
.col-sm-9  {max-width: 75%;}
.col-sm-10 {max-width: 83.333333%;}
.col-sm-11 {max-width: 91.666667%;}
.col-sm-12 {max-width: 100%;}
}
@media (min-width: 768px) {
.container {
    max-width: 720px;
}
 .col-md-1  {max-width: 8.333333%;}
 .col-md-2  {max-width: 16.666667%}
 .col-md-3  {max-width: 25%;}
 .col-md-4  {max-width: 33.333333%;}
 .col-md-5  {max-width: 41.666667%;}
 .col-md-6  {max-width: 50%;}
 .col-md-7  {max-width: 58.333333%;}
 .col-md-8  {max-width: 66.666667%;}
 .col-md-9  {max-width: 75%;}
 .col-md-10 {max-width: 83.333333%;}
 .col-md-11 {max-width: 91.666667%;}
 .col-md-12 {max-width: 100%;}
}

How would I reduce that code in Sass ?

Answer 1

One way I found to do this is by using @mixin and @for. See the code below.

@mixin medias($media){
    $x: 100/12;
    $newWidth: $x;
    @for $var from 1 to 13 {
        .col-#{$media}-#{$var} {
            max-width: percentage($newWidth/100);
        }
        $newWidth: $newWidth+$x;
    }
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    @include medias('sm');
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
   @include medias('md');
}

The . css file gets:

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  .col-sm-1 {
    max-width: 8.33333%;
  }
  .col-sm-2 {
    max-width: 16.66667%;
  }
  .col-sm-3 {
    max-width: 25%;
  }
  .col-sm-4 {
    max-width: 33.33333%;
  }
  .col-sm-5 {
    max-width: 41.66667%;
  }
  .col-sm-6 {
    max-width: 50%;
  }
  .col-sm-7 {
    max-width: 58.33333%;
  }
  .col-sm-8 {
    max-width: 66.66667%;
  }
  .col-sm-9 {
    max-width: 75%;
  }
  .col-sm-10 {
    max-width: 83.33333%;
  }
  .col-sm-11 {
    max-width: 91.66667%;
  }
  .col-sm-12 {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  .col-md-1 {
    max-width: 8.33333%;
  }
  .col-md-2 {
    max-width: 16.66667%;
  }
  .col-md-3 {
    max-width: 25%;
  }
  .col-md-4 {
    max-width: 33.33333%;
  }
  .col-md-5 {
    max-width: 41.66667%;
  }
  .col-md-6 {
    max-width: 50%;
  }
  .col-md-7 {
    max-width: 58.33333%;
  }
  .col-md-8 {
    max-width: 66.66667%;
  }
  .col-md-9 {
    max-width: 75%;
  }
  .col-md-10 {
    max-width: 83.33333%;
  }
  .col-md-11 {
    max-width: 91.66667%;
  }
  .col-md-12 {
    max-width: 100%;
  }
}