Skip to content

Instantly share code, notes, and snippets.

@geckotang
Created March 10, 2014 08:15
Show Gist options
  • Save geckotang/9461230 to your computer and use it in GitHub Desktop.
Save geckotang/9461230 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// ----
/* nest */
.block {
background-color: black;
.block__elem1 { background-color: tomato;}
&__elem2 { background-color: chocolate; }
& &__elem3 {background-color: orange; }
& &__elem3 {
&__elem3_1 { background: orange; }
}
@at-root { // = @at-root(without:rule)
&__elem4 {background-color: gold;}
}
}
/* @media */
@media print {
.block2 {
background: tomato;
@at-root(without:media) {
background: transparent;
&__elem { background-color: gold;}
}
}
}
/* placeholder with & */
%p-block3 {
background: red;
&__elem {
background: green;
}
}
.block3 {
@extend %p-block3;
&__elem {
@extend %p-block3__elem;
}
}
/* placeholder */
%p-block4 {
background: orange;
%p-block4__elem {
background: lime;
}
}
.block4 {
@extend %p-block4;
&__elem {
@extend %p-block4__elem;
}
}
// ----
// from sass 3.3.0.rc.1 to sass3.3.0.rc.2
// ----
//.block3 {
// $selector: &;
// #{&}__element {
// background: red;
// }
//}
/* nest */
.block {
background-color: black;
}
.block .block__elem1 {
background-color: tomato;
}
.block__elem2 {
background-color: chocolate;
}
.block .block__elem3 {
background-color: orange;
}
.block .block__elem3__elem3_1 {
background: orange;
}
.block__elem4 {
background-color: gold;
}
/* @media */
@media print {
.block2 {
background: tomato;
}
}
.block2 {
background: transparent;
}
.block2__elem {
background-color: gold;
}
/* placeholder with & */
.block3 {
background: red;
}
.block3__elem {
background: green;
}
/* placeholder */
.block4 {
background: orange;
}
.block4 .block4__elem {
background: lime;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment