CSS Nesting is making the rounds yet again. Remember earlier this year when Adam and Miriam put three syntax options up for a vote? Those results were tallied and it wasn’t even even close.
Now there’s another chance …
Here’s Kilian Valkhof on CSS nesting which isn’t available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and nesting in Sass or Less though. Take, for example, the following code:
div 
We don’t have “regular” nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn’t mention anything about media queries. I’d hope we get that right out of the gate …
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 …
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;
}
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 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 …
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 …
