Sass/SCSS Control Directives

@mixin theme($isDark) {
    @if $isDark { # if condition
        background: black;
        color: white;
    } @else { # else clause
        background: white;
        color: black;
    }
}

$colors: (red, blue, green);
@each $color in $colors { # loop through list
    .text-#{$color} {
        color: $color;
    }
}

$theme-colors: (
    primary: #3498db,
    success: #2ecc71
);
@each $name, $color in $theme-colors { # loop map
    .btn-#{$name} {
        background: $color;
    }
}

@for $i from 1 through 3 { # loop 1 to 3 (inclusive)
    .col-#{$i} {
        width: 100% / $i;
    }
}

$i: 1;
@while $i < 4 { # while condition true
    .item-#{$i} {
        width: 100px * $i;
    }
    $i: $i + 1;
}