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

i'm 1 of developers on project, our sass delivered designer. know basics of sass, i'm not sure if possible.

i have class want generate multiple times, , class name should change depending on mixin.

these mixins:

@mixin small-tablet {     @media screen , (max-width:767px)     {         @content;     } }  @mixin mobile {     @media screen , (max-width:480px)     {         @content;     } } 

this part want add (pseudo-code):

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

and output should this:

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

how can result?

you try in way

$mobile: 480; $smalltablet: 767;   @mixin mq($width) {     @media screen , (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 screen , (max-width: 480px) {   table.responsive-mobile {     display: block;   } } @media screen , (max-width: 767px) {   table.responsive-small-tablet {     display: block;   } }