bpainter

<h1>Color Functions</h1>
<p>Our message boxes were a little boring. Based on Dribbble, gradients and shadows make everything better. We already have rounded corners. We have the trifecta of awesome.</p>

<div class="error">
  <p>Something terrible happened with the system and we can't proceed.</p>
  <div class="close">x</div>
</div>

<div class="caution">
  <p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>

bpainter

<h1>Functions</h1>
<p>If you have some simple or complex calculations you want to perform, a function will make it nice & easy. A good use of a function is calculating widths in a grid system.</p>

<article role="main">
  <h2>Main content</h2>
</article>

<aside role="complementary">
  <p>Some secondary content</p>
</aside>

bpainter

<h1>Placeholder Directive</h1>
<p>We've started cleaning up our CSS but it's still not as clean as it needs to be. The placeholder directive is basically a silent class. It's output in our CSS, but in a comma delimted fashion so the output is just a bit cleaner.</p>

<div class="error">
  <p>Something terrible happened with the system and we can't proceed.</p>
  <div class="close">x</div>
</div>

<div class="caution">
  <p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>

bpainter

<h1>@extend Directive</h1>
<p>One issue with using mixins is it can create CSS & HTML that's not very DRY and may bloat your final output. As an alternative you can use the @extend directive, which outputs CSS that is a bit more natural.</p>

<div class="error">
  <p>Something terrible happened with the system and we can't proceed.</p>
  <div class="close">x</div>
</div>

<div class="message caution">
  <p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>

bpainter

<h1>Mixin - Complex</h1>
<p>You can create much more complex mixins that take multiple variables and help with the reuse of multiple types of CSS rules.</p>

<div class="message error">
  <p>Something terrible happened with the system and we can't proceed.</p>
  <div class="close">x</div>
</div>

<div class="message caution">
  <p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>

bpainter

<h1>Mixin - Complex CSS Version</h1>
<p>We want to create a series of notification boxes. It might look something like this with normal CSS..</p>

<div class="message error">
  <p>Something terrible happened with the system and we can't proceed.</p>
  <div class="close">x</div>
</div>

<div class="message caution">
  <p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>

bpainter

<h1>Mixin - Simple</h1>
<p>A great use for a mixin is to take redundant CSS3 with multiple vendor prefixes and create a snippet of CSS rules that can be reused.</p>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

bpainter

<h1>Math Operations</h1>
<p>Sass has some pretty nifty opertions that will do calculations for you. You have number (+, -, /, *, %), string, and color operations to do your bidding.</p>

<ol>
  <li>Base font size + 12px = <span>bigger font size</span></li>
  <li>Base font size - 50% = <span>smaller font size</span></li>
  <li>
    <span class="color-1">Color 1</span> + 
    <span class="color-2">Color 2</span> = 
    <span class="new-color">Mix</span>    

bpainter

<h1>Parent Selectors</h1>
<p>A parent selector lets you reference the parent when nesting. It's handy for things nesting some of the psuedo selectors or referencing elements, classes or ID's further up the DOM tree.</p>

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

bpainter

<h1>Nesting - Sass</h1>
<p>We have a basic navigation structure that will illustrate how we might translate it to Sass.</p>
<p>In the previous example we were overly specific. We've cleaned up a number of specificity issues.</p>

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>