Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 3.3 at-root feature

The new use of the & and @at-root in Sass is pretty much blowing my mind!

play here

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}
.block-name {
&[role=navigation] {
color: blue;
}
&__element {
color: red;
&__element {
color: orange;
}
}
&__element {
color: brown;
&--modifer {
color: yellow;
}
}
}
@media print {
.page {
width: 8in;
}
}
.page {
color: red;
}
.block-name[role=navigation] {
color: blue;
}
.block-name__element {
color: red;
}
.block-name__element__element {
color: orange;
}
.block-name__element {
color: brown;
}
.block-name__element--modifer {
color: yellow;
}
<h1>The <code>&amp;</code> and <code>@at-root</code></h1>
<p>The new use of the <code>&amp;</code> and <code>@at-root</code> in Sass is pretty much blowing my mind!</p>
<p><a href="http://sassmeister.com/gist/7797067">play here</a></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment