SASS: Dependências, margens e colunas

Acredito que o SASS veio facilitar muito o nosso desenvolvimento, então que tal colocá-lo em prática!

• Primeiro, criamos uma lista de margens, superior, laterais e inferior. Imediatamente e muito rapidamente.

$margins: top bottom left right;

@each $margin in $margins {

    @for $i from 1 through 10 {

        .m-#{$margin}-#{$i} {

            margin-#{$margin}: $i * 10px;
        }
    }
}

Agradável! Vamos fazer o mesmo com as colunas, criando de 1 a 12:

@for $i from 1 through 12 {

    .column-#{$i} { 
        width: 100% / 12 * $i;
    }
}

Muito simples! Aqui temos poucas linhas.