Skip to content

Instantly share code, notes, and snippets.

@antsa
Created May 13, 2011 07:58
Show Gist options
  • Save antsa/970172 to your computer and use it in GitHub Desktop.
Save antsa/970172 to your computer and use it in GitHub Desktop.
// =========================
// Example 1: using a @mixin
// =========================
// SCSS:
@mixin a_pink_box() {
float: left;
display: block;
color: pink;
width: 100px;
height: 100px;
}
.valentinecard {
@include a_pink_box;
}
.other_pink_thing {
@include a_pink_box;
font-size: 2em;
}
=>
// CSS:
.valentinecard {float: left; display: block; color: pink; width: 100px; height: 100px}
.other_pink_thing {float: left; display: block; color: pink; font-size: 2em; width: 100px; height: 100px}
// Unnecessary duplication
// ========================
// Example 2: using @extend
// ========================
// SCSS:
.a_pink_box {
float: left;
display: block;
color: pink;
}
.valentinecard {
@extend .a_pink_box;
}
.other_pink_thing {
@extend .a_pink_box;
font-size: 2em;
}
=>
// CSS:
.valentinecard, .other_pink_thing {float: left; display: block; color: pink; width: 100px; height: 100px}
.other_pink_thing {font-size: 2em}
// No duplication!
@styledev
Copy link

Thank you! I was wondering about this.

Though line 58 should be:

.a_pink_box, .valentinecard, .other_pink_thing{float:left;display:block;color:pink;}

@julianeden
Copy link

Thanks very much! Cleared up my understanding of the difference between the two. Before this I really couldn't figure out what made them any different at all!

@pocketbird
Copy link

Seriously, thank you. It's surprisingly difficult to fine a simple, concise explanation of things like this.

@motionharvest
Copy link

To clarify the posts here, I've forked this gist and added some further information.
https://gist.github.com/cmndo/641589d08e94405b6be4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment