Currently working on a Saleor Site and diving into the world of Django and SASS for the first time.
While crafting my own styling rules in SCSS files, I've noticed some repetitive code that could potentially be streamlined. It seems like there should be a more efficient way to handle this without duplicating so much content. Unfortunately, I couldn't find any helpful style guides specific to SCSS.
Anyone have suggestions on how to optimize 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;
}
}
/* This pattern repeats for right, bottom, vertical, and horizontal padding adjustments */
}
All feedback is appreciated.
Edit: Here's the improved code after implementing Jakob's suggestion for optimization.
@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; }
}
}