Exploring SCSS Styles for List Items
In this code snippet, I am investigating the order of selection for classes and pseudo-selectors in SCSS. Specifically, I am questioning whether &:before.active is equivalent to &.active:before.
Here is an example illustrating the latter scenario:
.sidebar-list {
list-style-type: none;
padding: 0;
& li {
padding: 4px 0;
&:before {
color: darken($font-color, 60%);
font-family: "FontAwesome";
content: "\f101\00a0";
}
&.selected:before {
color: darken($font-color, 30%);
}
}
}
Now, let's take a closer look at the key part (inside the li):
&:before {
color: darken($font-color, 60%);
font-family: "FontAwesome";
content: "\f101\00a0";
&.selected {
color: darken($font-color, 30%);
}
}
The question remains - which approach should be used to style the :before pseudo-selector for a list item?
Your insights are appreciated!