Skip to content

Instantly share code, notes, and snippets.

@ballawala-lv
Created May 27, 2014 00:39
Show Gist options
  • Select an option

  • Save ballawala-lv/5950652936e00e84aa1e to your computer and use it in GitHub Desktop.

Select an option

Save ballawala-lv/5950652936e00e84aa1e to your computer and use it in GitHub Desktop.
padding and margin mixin
@mixin generate-margins($val, $horizontal, $vertical, $all) {
@if $vertical == true {
.mt-#{$val} {
margin-top: $val+px;
}
.mb-#{$val} {
margin-bottom: $val+px;
}
.mtb-#{$val} {
margin-top: $val+px;
margin-bottom: $val+px;
}
}
@if $horizontal == true {
.ml-#{$val} {
margin-left: $val+px;
}
.mr-#{$val} {
margin-right: $val+px;
}
.mlr-#{$val} {
margin-left: $val+px;
margin-right: $val+px;
}
}
@if $all == true {
.m-#{$val} {
margin: $val+px;
}
}
}
@mixin generate-paddings($val, $horizontal, $vertical, $all) {
@if $vertical == true {
.pt-#{$val} {
padding-top: $val+px;
}
.pb-#{$val} {
padding-bottom: $val+px;
}
.ptb-#{$val} {
padding-top: $val+px;
padding-bottom: $val+px;
}
}
@if $horizontal == true {
.pl-#{$val} {
padding-left: $val+px;
}
.pr-#{$val} {
padding-right: $val+px;
}
.plr-#{$val} {
padding-left: $val+px;
padding-right: $val+px;
}
}
@if $all == true {
.p-#{$val} {
padding: $val+px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment