It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Yes, you can, and it doesn’t really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
This works:
@supports(--a: b) {
@media (min-width: 1px) {
body {
background: red;
}
}
}And so does this, the reverse nesting of the above:
@media (min-width: 1px) {
@supports(--a: b) {
body {
background: green;
}
}
}I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this:
.element {
display: grid;
grid-template-columns: 100px 1fr;
@include breakpoint(baby-bear) {
display: block;
}
}That’s straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I’m never quite sure which one I should be doing.… Read article “Where Do You Nest Your Sass Breakpoints?”
Brad Frost was asking about this the other day…
Sass people, which way do you do it and why? pic.twitter.com/dIBA9BIuCO
— Brad Frost (@brad_frost) October 1, 2018
.c-btn {
&__icon {
...
}
}I guess that’s technically “nesting” but the selectors come out flat:
.c-button__icon { }The question was whether you do that or just write out the whole selector instead, as you would with vanilla CSS. Brad’s post gets into all the pro’s and con’s of both … Read article “Sass Selector Combining”
The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I’ve experienced many times. You’re happily nesting in Sass. You’re maybe a level or two deep, and you need to style a variation based on some parent selector. You need to either break out of the nesting and start a new nesting context, or go nuclear with @at-root. I’ll let Filip tell … Read article “inStyle (Modifying the Current Selector `&` in Sass)”
The & is an extremely useful feature in Sass (and Less). It’s used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you’re struggling and could have written the same code in regular CSS.
Let’s see if we can really understand it.… Read article “The Sass Ampersand”
