Not long ago I wrote about my current modular CSS (BEM/OOCSS) naming conundrum. This is a shorter but related post about how those kinds of selectors can be produced with new features of Sass 3.3.
Using @at-root is a way (Sass 3.3 onwards, full Sass 3.3 Changelog here) to tell Sass that you don’t want something nested. Using @at-root makes it possible to nest something within something else but still reference the parent using the ampersand symbol (which in Sass always references the parent) and interpolation. That sounds like a whole load of cone-headed geekery so let’s consider some examples of how this may be useful when it comes to creating BEM/OOCSS type selectors and hopefully it will be self explanatory.
Using @at-root is a way (Sass 3.3 onwards, full Sass 3.3 Changelog here) to tell Sass that you don’t want something nested. Using @at-root makes it possible to nest something within something else but still reference the parent using the ampersand symbol (which in Sass always references the parent) and interpolation. That sounds like a whole load of cone-headed geekery so let’s consider some examples of how this may be useful when it comes to creating BEM/OOCSS type selectors and hopefully it will be self explanatory.
view source
