public
Created

Extends

  • Download Gist
01_legacy.css
CSS
1 2 3 4 5 6 7
/* standard old skool CSS, the land of copy and paste */
 
#pageContent {width:954px; }
#pageContent h2 {margin-bottom:6px;font-size:13px;font-family:Arial, Verdana, Helvetica, sans-serif;}
#pageContent h3 {font-size:13px;font-family:Arial, Verdana, Helvetica, sans-serif;}
#pageContent h4 {font-size:13px;font-family:Arial, Verdana, Helvetica, sans-serif;}
#pageContent p {margin:0 0 6px;font-size:11px;}
02_mixins.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
// sure we can use mixins and variables to decrease the level of copy and paste we do in our SASS
 
// -- variables -- //
$medium_font_size: 13px;
$small_font_size: 11px;
$primary_font_family: #{Arial, Verdana, Helvetica, sans-serif};
 
// -- mixins -- //
@mixin primary_font_family {
font-family: $primary_font_family;
}
@mixin medium_font_size {
font-size: $medium_font_size;
}
@mixin small_font_size {
font-size: $small_font_size;
}
@mixin standard_header {
@include medium_font_size;
@include primary_font_family;
}
 
// -- styles -- //
/* re-written using variables, mixins and nesting */
/* ---------------------------------------------- */
#pageContent {
width: 954px;
h2 {
margin-bottom: 6px;
@include standard_header;
}
h3 {
@include standard_header;
}
h4 {
@include standard_header;
}
p {
margin: 0 0 6px;
@include small_font_size;
}
}
03_mixins.css
CSS
1 2 3 4 5 6 7 8
/* but when looking at the final output, instead of me copying and pasting, the machine is. Did we really gain anything? */
/* in fact, our CSS output looks exactly like the initial CSS we started with. We are not using our power for good. */
 
#pageContent { width: 954px; }
#pageContent h2 { margin-bottom: 6px; font-size: 13px; font-family: Arial, Verdana, Helvetica, sans-serif; }
#pageContent h3 { font-size: 13px; font-family: Arial, Verdana, Helvetica, sans-serif; }
#pageContent h4 { font-size: 13px; font-family: Arial, Verdana, Helvetica, sans-serif; }
#pageContent p { margin: 0 0 6px; font-size: 11px; }
04_extends.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
// Let's try this same code, except replace @include with @extend. But to do this we need to make a class object out of our mixin.
 
// -- variables -- //
$medium_font_size: 13px;
$small_font_size: 11px;
$primary_font_family: #{Arial, Verdana, Helvetica, sans-serif};
 
/* and this is how we do this better with extends */
/* ---------------------------------------------- */
 
// -- oocss -- //
.arial_font_family {
font-family: $primary_font_family;
}
.medium_font_size {
font-size: $medium_font_size;
}
.small_font_size {
font-size: $small_font_size;
}
.standard_header {
@extend .medium_font_size;
@extend .arial_font_family;
}
 
// -- styles -- //
#pageContent {
width: 954px;
h2 {
margin-bottom: 6px;
@extend .standard_header;
}
h3 {
@extend .standard_header
}
h4 {
@extend .standard_header
}
p {
margin: 0 0 6px;
@extend .small_font_size;
}
}
 
// -- we still have the power of being able to read nicely formatted SASS, but we removed all the copy/paste bloat --//
05_extends.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13
// This is the AH HA!
// With this final output for the CSS, the OOCSS object you created leads the concatenated list of selectors that are all using the same styles.
 
 
.arial_font_family, #pageContent h2, #pageContent h3, #pageContent h4 { font-family: Arial, Verdana, Helvetica, sans-serif; }
 
.medium_font_size, #pageContent h2, #pageContent h3, #pageContent h4 { font-size: 13px; }
 
.small_font_size, #pageContent p { font-size: 11px; }
 
#pageContent { width: 954px; }
#pageContent h2 { margin-bottom: 6px; }
#pageContent p { margin: 0 0 6px; }

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.