bpainter

<h1>Sass Syntax</h1>
<p>The Sass syntax is the original syntax. It is white-space dependent and doesn't require curly braces or semi-colons. A gotcha to keep in mind is that your tabbing has to be consistent. You can't mix spaces or tabs and the tab length should be consistent otherwise the compiler will eat flaming death.</p>

<div class="columns">
  <div class="col1">Column 1</div>
  <div class="col2">Column 2</div>
  <div class="col3">Column 2</div>
</div>

bpainter

<h1>SCSS (Sassy) Syntax</h1>
<p>The SCSS syntax was implemented a while after the Sass syntax. SCSS isn't white space dependent and looks and functions just like writing normal CSS.</p>

<div class="columns">
  <div class="col1">Column 1</div>
  <div class="col2">Column 2</div>
  <div class="col3">Column 2</div>
</div>

bpainter

<h1>Variables</h1>
<p>Think of variables as handy places to store values that you want to reuse over and over again throughout your Sass document. Good examples for using a variable is to store font stacks, common margin and padding, font sizes, & colors.</p>

<ol>
  <li>Sans Serif Font Stack</li>
  <li>Serif Font Stack</li>
  <li>Accent Color</li>
</ol>

bpainter

<h1>Nesting - CSS</h1>
<p>We have a basic navigation structure that will illustrate how we might translate it to Sass. If we were writing normal CSS this is how it would look.</p>
<p>If you look closely at our CSS rules they are overly specific. Whether you're writing CSS or Sass, only be as specific as you have to be. It'll save you many specificity headaches later on.</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>

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>

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>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>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>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 - 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>