Skip to content

Instantly share code, notes, and snippets.

@vadym-vorobel
Last active July 26, 2018 07:02
Show Gist options
  • Save vadym-vorobel/1667b26288ee672d5d454244016bcb96 to your computer and use it in GitHub Desktop.
Save vadym-vorobel/1667b26288ee672d5d454244016bcb96 to your computer and use it in GitHub Desktop.
Code for auto paddings and margings generation with LESS and Stylus. Generates classes like .m-t-5, .p-b-100 for margins and paddings (maximum value - 100, step is 5)
.generate-paddings-options(20);
.generate-paddings-options(@n, @i: 0) when (@i =< @n) {
@step: @i*5;
.p-t-@{step} {
padding-top: (@step*1px) !important;
}
.p-r-@{step} {
padding-right: (@step*1px) !important;
}
.p-l-@{step} {
padding-left: (@step*1px) !important;
}
.p-b-@{step} {
padding-bottom: (@step*1px) !important;
}
.padding-@{step} {
padding: (@step*1px) !important;
}
.generate-paddings-options(@n, (@i + 1));
}
.generate-margin-options(20);
.generate-margin-options(@n, @i: 0) when (@i =< @n) {
@step: @i*5;
.m-t-@{step} {
margin-top: (@step*1px);
}
.m-r-@{step} {
margin-right: (@step*1px);
}
.m-l-@{step} {
margin-left: (@step*1px);
}
.m-b-@{step} {
margin-bottom: (@step*1px);
}
.generate-margin-options(@n, (@i + 1));
}
step = 5
generate-margins(n, i = 0)
if i <= n
value = i * step
.m-t-{value}
margin-top: value * 1px !important
.m-b-{value}
margin-bottom: value * 1px !important
.m-l-{value}
margin-left: value * 1px !important
.m-r-{value}
margin-right: value * 1px !important
.margin-{value}
margin: value * 1px !important
generate-margins(n, i+ 1)
generate-margins(20)
generate-paddings(n, i = 0)
if i <= n
value = i * step
.p-t-{value}
padding-top: value * 1px !important
.p-b-{value}
padding-bottom: value * 1px !important
.p-l-{value}
padding-left: value * 1px !important
.p-r-{value}
padding-right: value * 1px !important
.padding-{value}
padding: value * 1px !important
generate-paddings(n, i+ 1)
generate-paddings(20)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment