the recurring pattern of media conditions in every single column

Question

Hello, I'm currently involved in a project where I have implemented media conditions for my columns using Sass.

Here is the code snippet:

// Mobile media - 320px width
@mixin mobile{
@media only screen and (max-width:767px){
    width: 300px;
}
}

Below is the code snippet for looping through my columns:

@for $col from 1 through $grid-cols{
.col-#{$col}{
    @include mobile;
}
}

where $grid-cols = 12

Thus, the CSS output looks like this:

@media only screen and (max-width: 767px) {
 .col-1 { width: 300px; } }

@media only screen and (max-width: 767px) {
 .col-2 { width: 300px; } }

...continuing till .col-12

I am aiming for the output to be:

@media only screen and (max-width: 767px) {
   .col-1, .col-2 { width:300px; }

If anyone has any suggestions, please share. Thank you!

Answer 1

Answer №1

To achieve the desired output, consider utilizing a SASS placeholder. You can replace your mixin like so:

@mixin mobile{
  @media only screen and (max-width:767px){
    width: 300px;
  }
}

Instead, use a placeholder:

%mobile {
  @media only screen and (max-width:767px){
    width: 300px;
  }
}

Then, call it with @extend %mobile; rather than @include mobile; in your loop.

For a detailed explanation on mixins and placeholders, check out this informative article.

Answer 2

To achieve the desired output, consider utilizing a SASS placeholder. You can replace your mixin like so:

@mixin mobile{
  @media only screen and (max-width:767px){
    width: 300px;
  }
}

Instead, use a placeholder:

%mobile {
  @media only screen and (max-width:767px){
    width: 300px;
  }
}

Then, call it with @extend %mobile; rather than @include mobile; in your loop.

For a detailed explanation on mixins and placeholders, check out this informative article.