Generated by SassMeister.com.

SassMeister-input-HTML.markdown

re: extends

What they really do:

When you extend a .class Sass looks for every occurrence of that class and creates a comma-separated selector to combine them. This is great until you lose sight of the every occurance part. That means that whenever you nest a selector you're extending then that nest will also be added to every other selector that is part of the extend.

It blows up really quickly.

Sass workflow to stay on top of this

• Avoid extending a nested selector
• Avoid adding styles to an extended .class name

Git workflow to stay on top of this

• pay close attention to the compiled css you commit
• learn how to use the -p flag when adding commits

git add -p

This let's you add your commits in chunks and makes it easier to spot huge unexpected chunks of compiles css you didn't intend to create.

Refactoring

It's too late to recommend refactoring for Estee until post-launch, but we could manage this issue better if instead of extending .classes we used the Sass concept of "silent" extendables. They start with a %, like '%small-text'.

There's a decent post on them here.

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

/* simple .class extend - OK */
.small-text {
  font-size: 0.8em;
}

.footer {
  @extend .small-text;
}

/* nested .class extend - YIKES */
.large-text {
  font-size: 2em;
}

footer {
  .large-text {
    /* this will make things blow up */
    /* you probably didn't intend for 
     there to be a 'footer article{}' 
     or for any of the following to be 
     prefixed with 'footer'
     or for them to be green
    */
    color: green;
  }
}

article {
  @extend .large-text;
}
.heading {
  @extend .large-text;
}
.name {
  @extend .large-text;
  .last-name {
    @extend .large-text;
  }
}

SassMeister-output.css

/* simple .class extend - OK */
.small-text, .footer {
  font-size: 0.8em;
}

/* nested .class extend - YIKES */
.large-text, article, .heading, .name, .name .last-name {
  font-size: 2em;
}

footer .large-text, footer article, footer .heading, footer .name, footer .name .last-name, .name footer .last-name {
  /* this will make things blow up */
  /* you probably didn't intend for 
   there to be a 'footer article{}' 
   or for any of the following to be 
   prefixed with 'footer'
   or for them to be green
  */
  color: green;
}

SassMeister-rendered.html

<h1>re: extends</h1>

<h2>What they really do:</h2>

<p>When you extend a .class Sass looks for <em>every</em> occurrence of that class and creates a comma-separated selector to combine them. This is great until you lose sight of the <em>every occurance</em> part. That means that whenever you nest a selector you&#39;re extending then that nest will also be added to <em>every other</em> selector that is part of the extend. </p>

<p>It blows up really quickly. </p>

<h2>Sass workflow to stay on top of this</h2>

<ul>
<li>Avoid extending a nested selector</li>
<li>Avoid adding styles to an extended .class name</li>
</ul>

<h2>Git workflow to stay on top of this</h2>

<ul>
<li>pay close attention to the compiled css you commit</li>
<li>learn how to use the <code>-p</code> flag when adding commits</li>
</ul>

<p><code>git add -p</code></p>

<p>This let&#39;s you add your commits in chunks and makes it easier to spot huge unexpected chunks of compiles css you didn&#39;t intend to create. </p>

<h2>Refactoring</h2>

<p>It&#39;s too late to recommend refactoring for Estee until post-launch, but we could manage this issue better if instead of extending .classes we used the Sass concept of &quot;silent&quot; extendables. They start with a %, like &#39;%small-text&#39;.</p>

<p>There&#39;s a decent post on them <a href="http://thesassway.com/intermediate/understanding-placeholder-selectors">here</a>.</p>