Skip to content

Instantly share code, notes, and snippets.

@marco-martins
Forked from jeremyben/generators.scss
Last active October 8, 2019 08:38
Show Gist options
  • Save marco-martins/8aed240a7440a9bfe6a66c0de530e518 to your computer and use it in GitHub Desktop.
Save marco-martins/8aed240a7440a9bfe6a66c0de530e518 to your computer and use it in GitHub Desktop.
Size Generators (margin, padding, font-size) #scss #stylus
// Generate class helpers for size properties such as margin, padding, font-size
// Usage :
// @include marginer(5, 60, 5)
// .mt5 will then add margin-top:5px to the element,
// and so on for each side, from 5px to 60px with a 5px step.
@mixin marginer($min, $max, $step) {
.mt#{$min} {margin-top: $min*1px}
.mb#{$min} {margin-bottom: $min*1px}
.ml#{$min} {margin-left: $min*1px}
.mr#{$min} {margin-right: $min*1px}
@if $min < $max {
@include marginer($min + $step, $max, $step);
}
}
@mixin paddinger($min, $max, $step) {
.pt#{$min} {padding-top: $min*1px}
.pb#{$min} {padding-bottom: $min*1px}
.pl#{$min} {padding-left: $min*1px}
.pr#{$min} {padding-right: $min*1px}
@if $min < $max {
@include paddinger($min + $step, $max, $step);
}
}
@mixin fontsizer($min, $max, $step) {
.fs#{$min} {font-size: $min*1px}
@if $min < $max {
@include marginer($min + $step, $max, $step);
}
}
// Generate class helpers for size properties such as margin, padding, font-size
// Usage :
// marginer(5, 60, 5)
// .mt-5 will then add margin-top:5px to the element,
// and so on for each side, from 5px to 60px with a 5px step.
marginer(min, max, step, unit = em)
.mt-{min}
margin-top s('%s%s', min, unit)
.mb-{min}
margin-bottom s('%s%s', min, unit)
.ml-{min}
margin-left s('%s%s', min, unit)
.mr-{min}
margin-right s('%s%s', min, unit)
if min < max
marginer(min + step, max, step, unit)
paddinger(min, max, step, unit = em)
.pt-{min}
padding-top s('%s%s', min, unit)
.pb-{min}
padding-bottom s('%s%s', min, unit)
.pl-{min}
padding-left s('%s%s', min, unit)
.pr-{min}
padding-right s('%s%s', min, unit)
if min < max
paddinger(min + step, max, step, unit)
fontsizer(min, max, step)
.fs{min}
font-size (min px)
if min < max
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment