SASS dynamic responsive classes mixin? - sass

Question

I'm trying to make a mixin to produce results similar to the following:
#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;
}
}
This is the mixin I wrote:
#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};
}
}
}
}
}
}
}
This is how I used it:
#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))
));
This is the result I'm getting:
#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
}
Ignore the media queries; I know they're different. It's the overall final result that I want.

Answer 1

I was putting in lists instead of maps.
The 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;
}
}
}
}
}
}
}
The call:
$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);