Naming
Component Styling Pattern
Use BEM-inspired modifiers with parent selector:
1@use '../scss/abstracts' as a;
2
3.section {
4 $self: &;
5 position: relative;
6
7 &-padding {
8 padding-block: a.$section-75;
9
10 &#{$self}-small {
11 padding-block: a.$section-50;
12 }
13
14 &#{$self}-large {
15 padding-block: a.$section-100;
16 }
17 }
18
19 &-padding-top {
20 padding-top: a.$section-75;
21
22 &#{$self}-small {
23 padding-top: a.$section-50;
24 }
25 }
26}