Skip to content

Instantly share code, notes, and snippets.

@rymizuki
Created April 19, 2014 01:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rymizuki/11070993 to your computer and use it in GitHub Desktop.
Save rymizuki/11070993 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----
.item {
color: red;
}
.main {
&__item {
@extend .item;
}
}
.parent {
/* scopeの中だけで適応されることを期待したい */
> .item {
font-size: 12px;
@for $num from 1 through 10 {
.child-#{$num} {
background-image: url('/img/icon-#{$num}.png');
}
}
}
}
.other {
&__item {
/* この時点ですでに.itemは拡張されている */
@extend .item;
}
}
@charset "UTF-8";
.item, .main__item, .other__item {
color: red;
}
.parent {
/* scopeの中だけで適応されることを期待したい */
}
.parent > .item, .parent > .main__item, .parent > .other__item {
font-size: 12px;
}
.parent > .item .child-1, .parent > .main__item .child-1, .parent > .other__item .child-1 {
background-image: url("/img/icon-1.png");
}
.parent > .item .child-2, .parent > .main__item .child-2, .parent > .other__item .child-2 {
background-image: url("/img/icon-2.png");
}
.parent > .item .child-3, .parent > .main__item .child-3, .parent > .other__item .child-3 {
background-image: url("/img/icon-3.png");
}
.parent > .item .child-4, .parent > .main__item .child-4, .parent > .other__item .child-4 {
background-image: url("/img/icon-4.png");
}
.parent > .item .child-5, .parent > .main__item .child-5, .parent > .other__item .child-5 {
background-image: url("/img/icon-5.png");
}
.parent > .item .child-6, .parent > .main__item .child-6, .parent > .other__item .child-6 {
background-image: url("/img/icon-6.png");
}
.parent > .item .child-7, .parent > .main__item .child-7, .parent > .other__item .child-7 {
background-image: url("/img/icon-7.png");
}
.parent > .item .child-8, .parent > .main__item .child-8, .parent > .other__item .child-8 {
background-image: url("/img/icon-8.png");
}
.parent > .item .child-9, .parent > .main__item .child-9, .parent > .other__item .child-9 {
background-image: url("/img/icon-9.png");
}
.parent > .item .child-10, .parent > .main__item .child-10, .parent > .other__item .child-10 {
background-image: url("/img/icon-10.png");
}
.other__item {
/* この時点ですでに.itemは拡張されている */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment