Skip to content

Instantly share code, notes, and snippets.

@rymizuki
Created March 13, 2014 05:31
Show Gist options
  • Save rymizuki/9522348 to your computer and use it in GitHub Desktop.
Save rymizuki/9522348 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----
%hoge {
display: block;
%bar {
color: green;
}
}
// キモい
.hoge {
@extend %hoge;
}
.bar {
@extend %bar;
}
// まあわかる
.hoge-2 {
@extend %hoge;
.bar-2 {
@extend %bar;
}
}
// こういうこともできるのかしら
%ex {
color: red;
%ex__item {
color: blue;
}
}
.ex1 {
@extend %ex;
& > item {
@extend %ex__item;
}
}
.ex2 {
@extend %ex;
}
// この場合、.ex1, .ex2 の子要素として生成される
.ex2__item {
@extend %ex__item;
}
// 更に試そうか
.ex3 {
@extend %ex;
// こうすると、.ex1, .ex2, .ex3の子要素として.ex__item3が生成される
&__item {
@extend %ex__item;
}
}
/*.ex4 { color: red; }
*.ex4 .ex4__item { color: blue; }
*ってするには
*/
%ex2 {
color: red;
%ex2__item {
color: blue;
}
%ex2__content {
color: green;
}
}
.ex4 {
@extend %ex2;
& &__item {
@extend %ex2__item;
}
& &__content {
@extend %ex2__content
}
}
%ex3 {
color: red;
&__item {
color: blue;
}
&__content {
color: green;
}
}
.ex5 {
@extend %ex3;
&__item {
@extend %ex3__item;
}
&__content {
@extend %ex3__content
}
}
@charset "UTF-8";
.hoge, .hoge-2 {
display: block;
}
.hoge .bar, .hoge-2 .bar, .hoge-2 .bar-2 {
color: green;
}
.ex1, .ex2, .ex3 {
color: red;
}
.ex1 > item, .ex1 .ex2__item, .ex2 .ex2__item, .ex3 .ex2__item, .ex1 .ex3__item, .ex2 .ex3__item, .ex3 .ex3__item {
color: blue;
}
/*.ex4 { color: red; }
*.ex4 .ex4__item { color: blue; }
*ってするには
*/
.ex4 {
color: red;
}
.ex4 .ex4__item {
color: blue;
}
.ex4 .ex4__content {
color: green;
}
.ex5 {
color: red;
}
.ex5__item {
color: blue;
}
.ex5__content {
color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment