CODEWITHSUNDEEP
csssasscompass-sass
user247702
user247702

Reputation: 24202

How can I generate a class multiple times for a list of mixins?

I'm one of the developers on this project, our SASS was delivered by a designer. I only know the basics of SASS, so I'm not sure if this is possible.

I have a class that I want to generate multiple times, and the class name should change depending on the mixin.

These are the mixins:

@mixin small-tablet
{
    @media only screen and (max-width:767px)
    {
        @content;
    }
}

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

This is the part I want to add (pseudo-code):

@include small-tablet, mobile
{
    table.responsive-@mixin-name
    {
        display: block;
    }
}

And the output should something be this:

@media only screen and (max-width:767px)
{
    table.responsive-small-tablet
    {
        display: block;
    }
}

@media only screen and (max-width:480px)
{
    table.responsive-mobile
    {
        display: block;
    }
}

How can I get this result?

Upvotes: 0

Views: 43

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

you could try in this way

$mobile: 480;
$smalltablet: 767;


@mixin mq($width) {
    @media only screen and (max-width:#{$width}px) {
        @content;
    }
}

@mixin generateMediaqueries {
    @include mq($mobile) {
      &-mobile {
        @content; 
      }
    }
    @include mq($smalltablet) {
      &-small-tablet {
        @content;
      }
    }
}

table.responsive {
  @include generateMediaqueries {
     display: block;
  }
}

Resulting output:

@media only screen and (max-width: 480px) {
  table.responsive-mobile {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  table.responsive-small-tablet {
    display: block;
  }
}

Upvotes: 1

Related Questions