Is there a cleaner way to write this SCSS code? - css

Question

I'm building a Saleor Site and I'm relatively new to Django and SASS.
I'm currently making my own styling rules in my SCSS files where there's some duplicated code and I feel like there's probably a way of reducing the amount of that duplicated code. Couldn't find any style guides in regards to SCSS.
Can I get some suggestions on a better way of doing this code?
.p {
&-around {
&_none {
padding: $none;
}
&_x-small {
padding: $x-small;
}
&_small {
padding: $small;
}
&_medium {
padding: $medium;
}
&_large {
padding: $large;
}
&_x-large {
padding: $x-large;
}
}
&-top {
/* only real difference is just "padding-top" instead of "padding" */
&_none {
padding-top: $none;
}
&_x-small {
padding-top: $x-small;
}
&_small {
padding-top: $small;
}
&_medium {
padding-top: $medium;
}
&_large {
padding-top: $large;
}
&_x-large {
padding-top: $x-large;
}
}
/* There's more with right, bottom, vertical, horizontal padding as well */
}
All input is welcome.
Edit:
This is the resulting code, thank you so much Jakob for making this much cleaner.
#each $size, $value in (
'none' : $none,
'x-small': $x-small,
'small' : $small,
'medium' : $medium,
'large' : $large,
'x-large': $x-large
){
.p {
&-around_#{$size} { padding: $value; }
&-vertical_#{$size} { padding-top: $value; padding-bottom: $value; }
&-horizontal_#{$size} { padding-left: $value; padding-right: $value; }
&-top_#{$size} { padding-top: $value; }
&-bottom_#{$size} { padding-bottom: $value; }
&-right_#{$size} { padding-right: $value; }
&-left_#{$size} { padding-left: $value; }
}
.m {
&-around_#{$size} { margin: $value; }
&-vertical_#{$size} { margin-top: $value; margin-bottom: $value; }
&-horizontal_#{$size} { margin-left: $value; margin-right: $value; }
&-top_#{$size} { margin-top: $value; }
&-bottom_#{$size} { margin-bottom: $value; }
&-right_#{$size} { margin-right: $value; }
&-left_#{$size} { margin-left: $value; }
}
}

Answer 1

I think I would use map, #each loop and interpolation #{}- like:
$padding: (
'none' : none,
'x-small': 1px,
'small' : 2px,
'medium' : 3px,
'large' : 4px,
'x-large': 5px
);
.p {
#each $size, $value in $padding {
&-around_#{$size} { padding: $value; }
&-top_#{$size} { padding-top: $value; }
&-right_#{$size} { padding-right: $value; }
&-bottom_#{$size} { padding-bottom: $value; }
&-left_#{$size} { padding-left: $value; }
}
}
If you like to keep the variables you can do:
.p {
#each $size, $value in (
'none' : $none,
'x-small': $x-small,
'small' : $small,
'medium' : $medium,
'large' : $large,
'x-large': $x-large
){
&-around_#{$size} { padding: $value; }
&-top_#{$size} { padding-top: $value; }
&-right_#{$size} { padding-right: $value; }
&-bottom_#{$size} { padding-bottom: $value; }
&-left_#{$size} { padding-left: $value; }
}
}

Answer 2

I guess this would be the best way to do it.
.p {
&-around, &-top {
&_none {
padding: $none;
}
&_x-small {
padding: $x-small;
}
&_small {
padding: $small;
}
&_medium {
padding: $medium;
}
&_large {
padding: $large;
}
&_x-large {
padding: $x-large;
}
}
}