SASS dynamisch reagierende Klassen mixen?

Question

Ich versuche, eine mixin zu machen Ergebnisse zu produzieren, die folgend ähneln:

@media (max-width: 767px) 
{ 
    .m-text-left 
    { 
     text-align: left; 
    } 
    .m-text-right 
    { 
     text-align: right; 
    } 
    .m-text-center 
    { 
     text-align: center; 
    } 
    .m-float-right 
    { 
     float: right; 
    } 
    .m-float-left 
    { 
     float: left; 
    } 
    .m-float-none 
    { 
     float: none; 
    } 
    .m-text-justify 
    { 
     text-align: justify; 
    } 
    .m-hide 
    { 
     visibility: hidden; 
     overflow: hidden; 

     max-height: 0; 
    } 
    .m-remove 
    { 
     display: none; 
    } 
} 
/* Portrait tablet to landscape */ 

@media (min-width: 768px) and (max-width: 1029px) 
{ 
    .t-text-left 
    { 
     text-align: left; 
    } 
    .t-text-right 
    { 
     text-align: right; 
    } 
    .t-text-center 
    { 
     text-align: center; 
    } 
    .t-float-right 
    { 
     float: right; 
    } 
    .t-float-left 
    { 
     float: left; 
    } 
    .t-float-none 
    { 
     float: none; 
    } 
    .t-text-justify 
    { 
     text-align: justify; 
    } 
    .t-hide 
    { 
     visibility: hidden; 
     overflow: hidden; 

     max-height: 0; 
    } 
    .t-remove 
    { 
     display: none; 
    } 
} 
/* Landscape to small desktop */ 

@media (min-width: 1030px) 
{ 
    .d-text-left 
    { 
     text-align: left; 
    } 
    .d-text-right 
    { 
     text-align: right; 
    } 
    .d-text-center 
    { 
     text-align: center; 
    } 
    .d-float-right 
    { 
     float: right; 
    } 
    .d-float-left 
    { 
     float: left; 
    } 
    .d-float-none 
    { 
     float: none; 
    } 
    .d-text-justify 
    { 
     text-align: justify; 
    } 
    .d-hide 
    { 
     visibility: hidden; 
     overflow: hidden; 

     max-height: 0; 
    } 
    .d-remove 
    { 
     display: none; 
    } 
} 

Dies ist mixin schrieb ich:

@mixin respond($responsive-classes) { 
    @each $screen, $query in (
     m: max-width $small-screen,        // Phones 
     p: min-width $small-screen+1 max-width $medium-screen, // Phones to Phablets 
     t: min-width $medium-screen+1 max-width $large-screen, // Phablets to Tablets 
     l: min-width $large-screen+1 max-width $wide-screen, // Tablets to Desktops 
     d: min-width $wide-screen+1) {       // Desktops 
     @include media($query, $grid-columns) { 
      @each $selector, $properties in $responsive-classes { 
       @if (length($properties) == 1 AND length(nth($properties, 2)) > 1) { 
        @each $value in nth($properties, 2) { 
         .#{$screen}-#{$selector}-#{$value} { 
          #{nth($properties, 1)}: #{$value}; 
         } 
        } 
       } @else { 
        @each $property, $value in $properties { 
         .#{$screen}-#{$selector} { 
          #{$property}: #{$value}; 
         } 
        } 
       } 
      } 
     } 
    } 
} 

Dies ist, wie ich es benutzt:

@include respond((
    (text, (text-align, (left, right, center, justify))), 
    (float, (float, (left, right, none))), 
    (hide, (visibility, hidden), (overflow, hidden), (max-height, 0)), 
    (remove, (display, none)) 
    )); 

Diese

ist das Ergebnis erhalte ich:

@media screen and (max-width: 480px) { 
    .m-float, 
    .m-text { 
     left: right 
    } 
} 
@media screen and (min-width: 481px) and (max-width: 620px) { 
    .p-float, 
    .p-text { 
     left: right 
    } 
} 
@media screen and (min-width: 621px) and (max-width: 955px) { 
    .t-float, 
    .t-text { 
     left: right 
    } 
} 
@media screen and (min-width: 956px) and (max-width: 1200px) { 
    .l-float, 
    .l-text { 
     left: right 
    } 
} 
@media screen and (min-width: 1201px) { 
    .d-float, 
    .d-text { 
     left: right 
    } 
} 
.hide { 
    visibility: hidden; 
    overflow: hidden; 
    max-height: 0 
} 

Ignoriere die Medienabfragen; Ich weiß, dass sie anders sind. Es ist das Gesamtresultat, das ich möchte.

Answer 1

Ich habe Listen anstelle von Karten eingefügt.

Das Mixin:

@mixin respond($modifier-class) { 
    @each $screen, $query in (
     m: max-width $small-screen,         // Phones 
     p: min-width $small-screen + 1 max-width $medium-screen -1, // Phones to Phablets 
     t: min-width $medium-screen max-width $large-screen,  // Phablets to Tablets 
     l: min-width $large-screen + 1 max-width $wide-screen - 1, // Tablets to Desktops 
     d: min-width $wide-screen) {        // Desktops 
     @include media($query) {         // Mixin from Bourbon's Neat 
      @each $selector, $rules in $modifier-class { 
       @each $property, $values in $rules { 
        @if (type-of($values) == "list") { 
         @each $value in $values { 
          .#{$screen}-#{$selector}-#{$value} { 
           #{$property}: $value; 
          } 
         } 
        } @else { 
         .#{$screen}-#{$selector} { 
          #{$property}: $values; 
         } 
        } 
       } 
      } 
     } 
    } 
} 

Der Aufruf:

$modifier-classes: (
     text: (text-align: (left, right, center, justify) ), 
     float: (float:  (left, right, none)   ), 
     hide: (visibility: hidden, 
        overflow:  hidden, 
        max-height: 0,        ), 
     remove: (display:  none       ) 
); 

@include respond($modifier-classes);