CSS supports nested selectors now!
I just learned that CSS now supports nested selectors! So I can write something like this and it works without using a preprocessor like SCSS:
.cal-link {
right: -18px;
top: -6px;
@media (max-width: 800px) {
right: 0;
top: -4px;
}
}
Here’s the caniuse page for more on browser support.
MDN says there are some limitations around using it with pseudo-elements like ::before though.