Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
nesting

8 Articles
{
,

}
Direct link to the article Help choose the syntax for CSS Nesting
nesting survey

Help choose the syntax for CSS Nesting

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 …

Avatar of Geoff Graham
Geoff Graham on Dec 20, 2022 (Updated on Dec 21, 2022)
Direct link to the article CSS Nesting, specificity, and you
nesting

CSS Nesting, specificity, and you

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 
…
Avatar of Robin Rendle
Robin Rendle on Aug 10, 2021
Direct link to the article Nested Media Queries
media queries nesting

Nested Media Queries

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 …

Avatar of Chris Coyier
Chris Coyier on Feb 9, 2021
Direct link to the article Can you nest @media and @support queries?
@supports media queries nesting

Can you nest @media and @support queries?

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 …

Avatar of Chris Coyier
Chris Coyier on Aug 5, 2019
Direct link to the article Where Do You Nest Your Sass Breakpoints?
media queries nesting Sass

Where Do You Nest Your Sass Breakpoints?

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;
  }
…
Avatar of Chris Coyier
Chris Coyier on Feb 11, 2019 (Updated on Apr 17, 2020)
Direct link to the article Sass Selector Combining
nesting Sass

Sass Selector Combining

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 …

Avatar of Chris Coyier
Chris Coyier on Oct 15, 2018 (Updated on Oct 17, 2018)
Direct link to the article inStyle (Modifying the Current Selector `&` in Sass)
nesting Sass selectors

inStyle (Modifying the Current Selector `&` in Sass)

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 …

Avatar of Filip Naumovic
Filip Naumovic on May 27, 2016 (Updated on Aug 3, 2021)
Direct link to the article The Sass Ampersand
nesting Sass

The Sass Ampersand

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 …

Avatar of Richard Finelli
Richard Finelli on Jan 12, 2016 (Updated on Feb 8, 2017)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top