Skip to content

Instantly share code, notes, and snippets.

@kieranmv95
Last active February 6, 2019 02:10
Show Gist options
  • Save kieranmv95/99c5e4cb66ec76256b68600a5ee4e136 to your computer and use it in GitHub Desktop.
Save kieranmv95/99c5e4cb66ec76256b68600a5ee4e136 to your computer and use it in GitHub Desktop.
Generates a array of spacing helper classes for margin and padding
// Customisable spacing units. these can be changed and new ones added
$spacing-units: (
1: 3px,
2: 5px,
3: 8px,
4: 13px,
5: 21px,
);
// These will not change this is just to help generate the classes with the correct naming
$spacing-naming: (
top: t,
right: r,
bottom: b,
left: l
);
@each $key, $value in $spacing-units {
@each $keyq, $valueq in $spacing-naming {
.m#{$valueq}-#{$key} {
margin-#{$keyq}: $value;
}
}
@each $keyq, $valueq in $spacing-naming {
.p#{$valueq}-#{$key} {
margin-#{$keyq}: $value;
}
}
.pa-#{$key} {
padding: $value;
}
.ma-#{$key} {
padding: $value;
}
}
@kieranmv95
Copy link
Author

generate helper classes for padding and margin

Example for Margin

.mt-1 {
    margin-top: 3px;
}
.mr-1 {
    margin-right: 3px;
}
.mb-1 {
    margin-bottom: 3px;
}
.ml-1 {
    margin-left 3px;
}
.ma-1 {
    margin: 3px;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment