Loops in SCSS - multiple variables and different values

Question

I want to make loop using multiple variables and different values. I wrote that .scss code:

// Margin variabels
$margin-dynamic: 15px !default;
$margin-auto: 0 auto !default;
$margin-none: 0 !default;

// Dynamic margin @mixin
@mixin margin-classes($margin-dynamic-classes) {
    @each $margins in $margin-dynamic-classes {
        .margin-#{$margins} {
            margin-#{$margins}: $margin-dynamic !important;
        }
        .margin-duble-#{$margins} {
            margin-#{$margins}: ($margin-dynamic * 2) !important;
        }
        .margin-minus-#{$margins} {
            margin-#{$margins}: -#{$margin-dynamic} !important;
        }
    }
}

@include margin-classes($margin-dynamic-classes:top right bottom left);

// Static margin
.margin-auto {
    margin: $margin-auto;
}

.margin-none {
    margin: $margin-none;
}

I want to add .margin-auto and .margin-none to the loop, but i don't know how to do that.

A same problem I'm having with that variables:

// Display variabels
$display-block: block !default;
$display-inline-block: inline-#{$display-block} !default;
$display-inline: inline !default;
$display-table: table !default;
$display-table-cell: #{$display-table}-cell !default;
$display-none: none !default;

// Display
.display-block {
    display: $display-block;
}
.display-inline-block {
    display: $display-inline-block;
}
.display-inline {
    display: $display-inline;
}
.display-table {
    display: $display-table;
}
.display-table-cell {
    display: $display-table;
}
.display-none {
    display: $display-none;
}

I'm newbe in SASS, so I would appreciate clarification on this.

If you have 2 different questions, you need to ask them separately. — cimmanon, Jul 25 '14 at 15:46
They're not duplicates. For your first question, I don't know why you'd want to have those extra classes inside of a loop at all. Your second question doesn't have any loops in it (nor an attempt to make one) and makes no sense anyway (why would you want to do this?). — cimmanon, Jul 25 '14 at 17:08
I want to made margin generator for my website project. My secend question is really contributes with first - I want to know how to make loop using multiple variables with different values. — MagicJoseph, Jul 25 '14 at 17:24
You haven't explained why you want the margin generation *inside* of the loop because they look pretty static to me (unless you want to have a lot of them repeated every time you call your mixin?). Your second question: http://stackoverflow.com/questions/20034750/access-the-iterator-and-append-it-to-variable-name-in-sass — cimmanon, Jul 25 '14 at 17:50
I'm now having solution of my problem. Thanks a lot for help. — MagicJoseph, Jul 25 '14 at 18:25
You can check display function here http://codepen.io/MagicJoseph/pen/igFBe.scss — MagicJoseph, Jul 25 '14 at 18:40
Check how it works after few updates. https://gist.github.com/MagicJoseph/daf007055d474be10062 — MagicJoseph, Jul 27 '14 at 15:20

Loops in SCSS - multiple variables and different values

0 Answers0