Last Updated: July 18, 2022
·
900
· williankeller

SASS: Dependencies margins and columns

I believe the SASS came to greatly facilitate our development, then how about putting it into practice!

  • First we create a list of margins, top, sides and bottom. At once and very quickly.
$margins: top bottom left right;

@each $margin in $margins {

    @for $i from 1 through 10 {

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

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

Nice! Let's do the same with the columns, creating 1 to 12:


@for $i from 1 through 12 {

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

Very simple! Here we have too few lines.