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.
Written by Willian Keller
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Sass
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#