bpainter

// --------------------------------------------------------
// arrows
// --------------------------------------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
//     @include arrow(top, #000, 50px);   
// }

bpainter

<h1>Control Directives - if, else if, else</h1>
<p>One of the features that makes Sass more robust that other preprocessors is the wide variety of control directives.</p>

<button type="submit">Submit to our will</button>

<button type="reset">Start Over</button>

<button class="cancel">Give Up</button>

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>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 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>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>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>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>@content directive</h1>
<p>We can take our media queries a step farther and create a mixin out of them. The @content directive in Sass allows you to pass entire sections of CSS rules back through a mixin.</p>

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

<aside role="complementary">
  Secondary content
</aside>