Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tree: e010f26fbd
Fetching contributors…

Cannot retrieve contributors at this time

301 lines (243 sloc) 13.1 KB
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<!-- Google Setup --><meta content="VbyiHsqFIT6NSIBRNw/TAnm+9zy0TAmFRiC68lYCoSw=" name="verify-v1">
<!-- OpenID Setup --><link href="" rel="openid.server">
<link href="" rel="openid.delegate">
<link href="" rel="openid2.local_id">
<link href="" rel="openid2.provider">
<meta content="" http-equiv="X-XRDS-Location">
<title>Style Guides Using Sass @extend « Thomas Reynolds</title>
<!--[if lt IE 9]>
<script src=""></script>
<![endif]--><!-- Stylesheet --><link rel="stylesheet" type="text/css" href="/stylesheets/style.css?v2">
<!-- RSS --><link href="" rel="alternate" title="Award Winning Fjords" type="application/rss+xml">
<script src="/javascripts/modernizr.custom.js" type="text/javascript"></script><script src="//"></script><!--script type="text/javascript" src="/javascripts/jqwidont.js"></script-->
<body class="post">
<header><div class="center">
<h1><a href="/">Award-Winning Fjords</a></h1>
<h2 class="byline author vcard">
Words &amp; Wisdom by
<span class="fn">Thomas Reynolds</span>
<p id="social">
<a href="">GitHub</a>, <a href="">Twitter</a> &amp; <a href="">Portfolio</a><br><a id="contact" href="">Contact me</a>
</header><div id="frame">
<div id="post">
<article class="hentry"><h1 class="entry-title">
Style Guides Using Sass @extend
<time class="updated" pubdate>Jul 30 2010</time>
<!--div id='rdbWrapper' style="float: right; display: inline; width: 150px; height: 50px;"></div><br clear="all" /><script type='text/javascript'>
(function() {
var s = document.getElementsByTagName('script')[0],
rdb = document.createElement('script');
rdb.type = 'text/javascript';
rdb.async = true;
rdb.src = document.location.protocol + '//';
s.parentNode.insertBefore(rdb, s);
<div class="entry-content">
<p>There are some very common front-end development patterns that drive me crazy. CSS with every style related to a specific selector on one line and IE-only stylesheets with conditional comments are both common place and even encouraged by some. But the worst, in my opinion, is breaking our CSS into multiple files in an attempt to make them "themable." Usually this results in something like a <tt>main.css</tt> and a <tt>fonts.css</tt> or <tt>colors.css</tt>. Having a go-to file for designers to manipulate fonts and colors is very useful, but usually the structure of this secondary file mirrors the primary file and you end up with a lot of repetition. Furthermore, if your DOM structure changes, then you will need to update multiple files (<tt>ie.css</tt> results in a similar problem).</p>
<p>Sass' @extend feature allows us to have a <tt>style-guide.sass</tt> in which designers can run free, but is not dependent on DOM structure. Let's take a look at how I setup my style guides.</p>
<h2>The Style Guide</h2>
<p>The designer on the project has put together a wonderful style guide PDF which I will be implementing in Sass. Here is what it looks like:</p>
<p><img src="/images/style-guide-full.png"></p>
<p>As you can see, each style has a title and some specifics for the text treatment.</p>
<p>First I setup variables for our color palatte.</p>
<pre class="CodeRay">$primary-orange: #fe8a16
$hover-orange: #f67502
$steel-blue: #303b41
$bright-blue: #4892bc
$dark-grey: #4b4b48
<p>Next I create some simple mixins to handle usage of custom fonts.</p>
<pre class="CodeRay">=custom-font
font-family: "Droid Sans"
font-weight: normal
font-family: "Droid Sans Bold"
font-weight: bold
<p>Finally, I start defining the styles as classes. As you can see, I am using @extend to avoid repeating myself. I'm going to omit some of the styles in the guide for the sake of brevity.</p>
<pre class="CodeRay">.sg-heading-1
font-size: 32px
line-height: 36px
color: $steel-blue
@extend .sg-heading-1
font-size: 20px
line-height: 28px
@extend .sg-heading-2
color: $bright-blue
font-size: 14px
line-height: 24px
font-weight: normal
color: $dark-grey
@extend .sg-main-body
font-size: 12px
line-height: 18px
font-weight: normal
color: $primary-orange
text-decoration: none
color: $hover-orange
<h2>Referencing the Style Guide</h2>
<p>Now, when I go to implement a specific portion of the site, I can be concise by referencing the style guide.</p>
<pre class="CodeRay">.info-box
@extend .sg-heading-2
ul li
@extend .sg-text-link-1
@extend .sg-main-body
@extend .sg-secondary-body
<p>Here's the resulting CSS output:</p>
<pre class="CodeRay"><span class="cl">.sg-heading-1</span>, <span class="cl">.sg-heading-2</span>, <span class="cl">.sg-heading-3</span>, <span class="cl">.info-box</span> <span class="ty">h2</span> {
<span class="ke">font-family</span>: <span class="s"><span class="dl">"</span><span class="k">Droid Sans</span><span class="dl">"</span></span>;
<span class="ke">font-weight</span>: <span class="vl">normal</span>;
<span class="ke">font-size</span>: <span class="fl">32px</span>;
<span class="ke">line-height</span>: <span class="fl">36px</span>;
<span class="ke">color</span>: <span class="cr">#303b41</span>; }
<span class="cl">.sg-heading-2</span>, <span class="cl">.sg-heading-3</span>, <span class="cl">.info-box</span> <span class="ty">h2</span> {
<span class="ke">font-size</span>: <span class="fl">20px</span>;
<span class="ke">line-height</span>: <span class="fl">28px</span>; }
<span class="cl">.sg-heading-3</span> {
<span class="ke">color</span>: <span class="cr">#4892bc</span>; }
<span class="cl">.sg-main-body</span>, <span class="cl">.sg-secondary-body</span>, <span class="cl">.info-box</span> <span class="ty">dl</span>, <span class="cl">.info-box</span> <span class="ty">p</span> {
<span class="ke">font-size</span>: <span class="fl">14px</span>;
<span class="ke">line-height</span>: <span class="fl">24px</span>;
<span class="ke">font-weight</span>: <span class="vl">normal</span>;
<span class="ke">color</span>: <span class="cr">#4b4b48</span>; }
<span class="cl">.sg-secondary-body</span>, <span class="cl">.info-box</span> <span class="ty">dl</span> {
<span class="ke">font-size</span>: <span class="fl">12px</span>;
<span class="ke">line-height</span>: <span class="fl">18px</span>; }
<span class="cl">.sg-text-link-1</span>, <span class="cl">.info-box</span> <span class="ty">ul</span> <span class="ty">li</span> {
<span class="ke">font-weight</span>: <span class="vl">normal</span>;
<span class="ke">color</span>: <span class="cr">#fe8a16</span>;
<span class="ke">text-decoration</span>: <span class="vl">none</span>; }
<span class="cl">.sg-text-link-1</span><span class="ps">:hover</span>, <span class="cl">.info-box</span> <span class="ty">ul</span> <span class="ty">li</span><span class="ps">:hover</span> {
<span class="ke">color</span>: <span class="cr">#f67502</span>; }
<p>I have been incredibly happy with this approach. It has all the independence of the external <tt>fonts-and-colors.css</tt> method, but is more flexible, uses less code and is more readable in both the Sass and CSS forms.</p>
<p>I highly suggest getting your designer to build a style guide. It enforces consistency and keeps the randomness out of coding. Why should a site use every font size between 12px and 22px? Just pick a few sizes and standardize on them.</p>
</article><div id="comments">
<div class="block">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<script type="text/javascript" src=""></script><!-- AddThis Button END -->
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'awf';
// var disqus_identifier = 'unique_dynamic_id_1234';
var disqus_url = '';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<aside id="previously"><p>My name is Thomas Reynolds. I'm a developer at <a href="">Metalab</a>, lucky denizen of Portland, active Crossfitter, a foodie, a cocktail enthusiast and all-around nerd.</p>
<a href="">GitHub</a>
<li><a href="">Middleman</a></li>
<li><a href="">iPhone-style Checkboxes</a></li>
<li><a href="">State Machine for JavascriptMVC</a></li>
<li><a href="">Router for JavascriptMVC</a></li>
<li><a href="">Mustache templates for JavascriptMVC</a></li>
<li><a href="">jQuery Image Chop</a></li>
<li><a href="">Pure templates for JavascriptMVC</a></li>
<li><a href="">Slickmap for Compass</a></li>
<li><a href="">Baseline for Compass</a></li>
Recent Articles
<a href="/archives">Archive</a>
<a href="/2011/05/13/coffeescript-specific-style-guide.html">CoffeeScript-specific Style Guide</a> <span>May 13</span>
<a href="/2011/05/09/javascript-microframeworks-and-the-future.html">Javascript Microframeworks and The Future</a> <span>May 9</span>
<a href="/2011/05/06/trigger-css3-animations-with-jquery.html">Trigger CSS3 Animations with jQuery</a> <span>May 6</span>
<a href="/2011/05/03/jquerydeferred-image-preloader.html">jQuery.Deferred Image Preloader</a> <span>May 3</span>
<a href="/2011/04/26/just-launched-pixelunion-v2.html">Just Launched: PixelUnion v2</a> <span>Apr 26</span>
<a href="/2011/04/26/just-give-a-damn-about-something.html">Just Give a Damn About Something</a> <span>Apr 26</span>
<a href="/2011/04/24/crossfit-is-for-nerds.html">CrossFit is for Nerds</a> <span>Apr 24</span>
<a href="/2011/04/23/branching-out-opening-up-and-publishing-more.html">Branching Out, Opening Up and Publishing More</a> <span>Apr 23</span>
<a href="/2011/04/15/middleman-v11.html">Middleman v1.1</a> <span>Apr 15</span>
<a href="/2011/04/13/adjustable-animations-with-sliders.html">Adjustable Animations with Sliders</a> <span>Apr 13</span>
<script type="text/javascript">
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true; = 'gauges-tracker';
t.setAttribute('data-site-id', '4d770721192b0c4ab6000002');
t.src = '//';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
</script><!-- Google Analytics --><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-90027-9']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www') + '';
ga.setAttribute('async', 'true');
Jump to Line
Something went wrong with that request. Please try again.