Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Extends
/* 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;}
// 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;
}
}
/* 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; }
// 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 --//
// 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; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.