add list documentation

source/assets/css/components/_sass-syntax-switcher.scss

@@ -11,6 +11,8 @@
     top: 4.78rem;
     margin-right: -1em;
 
+    a { border: 0; }
+
     a:focus {
       outline: 0px !important;
       border:none !important;

source/guide.html.haml

@@ -19,6 +19,7 @@ introduction: >
       - [Mixins](#topic-6)
       - [Inheritance](#topic-7)
       - [Operators](#topic-8)
+      - [Lists](#topic-9)
 
 %section.sl-l-section.sl-l-section--small#topic-1
   :markdown
@@ -211,10 +212,10 @@ introduction: >
         background-color: #efefef;
       }
 
-:markdown
-  Notice we're using `@import 'reset';` in the `base.scss` file. When you
-  import a file you don't need to include the file extension `.scss`. Sass
-  is smart and will figure it out for you.
+  :markdown
+    Notice we're using `@import 'reset';` in the `base.scss` file. When you
+    import a file you don't need to include the file extension `.scss`. Sass
+    is smart and will figure it out for you.
 
 %section.sl-l-section.sl-l-section--small#topic-6
   :markdown
@@ -562,3 +563,206 @@ introduction: >
       We've created a very simple fluid grid, based on 960px. Operations in Sass
       let us do something like take pixel values and convert them to percentages
       without much hassle.
+
+%section.sl-l-section.sl-l-section--small#topic-8
+  :markdown
+    ## Operators
+
+    Doing math in your CSS is very helpful. Sass has a handful of standard
+    math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're
+    going to do some simple math to calculate widths for an `aside` &
+    `article`.
+
+  - example do
+    :plain
+      .container {
+        width: 100%;
+      }
+
+      article[role="main"] {
+        float: left;
+        width: 600px / 960px * 100%;
+      }
+
+      aside[role="complementary"] {
+        float: right;
+        width: 300px / 960px * 100%;
+      }
+      ===
+      .container
+        width: 100%
+
+
+      article[role="main"]
+        float: left
+        width: 600px / 960px * 100%
+
+
+      aside[role="complementary"]
+        float: right
+        width: 300px / 960px * 100%
+
+  :markdown
+    We've created a very simple fluid grid, based on 960px. Operations in Sass
+    let us do something like take pixel values and convert them to percentages
+    without much hassle.
+
+    ## Mixins
+
+    Some things in CSS are a bit tedious to write, especially with CSS3 and
+    the many vendor prefixes that exist. A mixin lets you make groups of CSS
+    declarations that you want to reuse throughout your site. You can even
+    pass in values to make your mixin more flexible. A good use of a mixin is
+    for vendor prefixes. Here's an example for <code>transform</code>.
+
+  - example do
+    :plain
+      @mixin transform($property) {
+        -webkit-transform: $property;
+        -ms-transform: $property;
+        transform: $property;
+      }
+
+      .box { @include transform(rotate(30deg)); }
+      ===
+      =transform($property)
+        -webkit-transform: $property
+        -ms-transform: $property
+        transform: $property
+
+      .box
+        +transform(rotate(30deg))
+
+  :markdown
+    To create a mixin you use the <code>@mixin</code> directive and give it a
+    name. We've named our mixin <code>transform</code>. We're also using
+    the variable <code>$property</code> inside the parentheses so we can pass in
+    a transform of whatever we want. After you create your mixin, you can then
+    use it as a CSS declaration starting with <code>@include</code> followed
+    by the name of the mixin.
+
+    %hr/
+
+  %li#topic-7
+    :markdown
+      ## Extend/Inheritance
+
+      This is one of the most useful features of Sass. Using
+      <code>@extend</code> lets you share a set of CSS properties from one
+      selector to another. It helps keep your Sass very DRY. In our example
+      we're going to create a simple series of messaging for errors, warnings
+      and successes using another feature which goes hand in hand with extend,
+      placeholder classes. A placeholder class is a special type of class
+      that only prints when it is extended, and can help keep your compiled
+      CSS neat and clean.
+
+    - example do
+      :plain
+        /* This CSS will print because %message-shared is extended. */
+        %message-shared {
+          border: 1px solid #ccc;
+          padding: 10px;
+          color: #333;
+        }
+
+        // This CSS won't print because %equal-heights is never extended.
+        %equal-heights {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .message {
+          @extend %message-shared;
+        }
+
+        .success {
+          @extend %message-shared;
+          border-color: green;
+        }
+
+        .error {
+          @extend %message-shared;
+          border-color: red;
+        }
+
+        .warning {
+          @extend %message-shared;
+          border-color: yellow;
+        }
+        ===
+        /* This CSS will print because %message-shared is extended. */
+        %message-shared
+          border: 1px solid #ccc
+          padding: 10px
+          color: #333
+
+
+        // This CSS won't print because %equal-heights is never extended.
+        %equal-heights
+          display: flex
+          flex-wrap: wrap
+
+
+        .message
+          @extend %message-shared
+
+
+        .success
+          @extend %message-shared
+          border-color: green
+
+
+        .error
+          @extend %message-shared
+          border-color: red
+
+
+        .warning
+          @extend %message-shared
+          border-color: yellow
+
+    :markdown
+      What the above code does is tells <code>.message</code>,
+      <code>.success</code>, <code>.error</code>, & <code>.warning</code>
+      to behave just like <code>%message-shared</code>. That means anywhere
+      that <code>%message-shared</code> shows up, <code>.message</code>,
+      <code>.success</code>, <code>.error</code>, & <code>.warning</code>
+      will too. The magic happens in the generated CSS, where each of these
+      classes will get the same CSS properties as <code>%message-shared</code>.
+      This helps you avoid having to write multiple class names on HTML
+      elements.
+
+      You can extend most simple CSS selectors in addition to placeholder
+      classes in Sass, but using placeholders is the easiest way to make
+      sure you aren't extending a class that's nested elsewhere in your
+      styles, which can result in unintended selectors in your CSS.
+
+      Note that the CSS in <code>%equal-heights</code> isn't generated, because
+      <code>%equal-heights</code> is never extended.
+
+    %hr/
+
+  %li#topic-9
+    :markdown
+      ## Lists
+
+      You can define a sequence of values as a list. These values can be
+      separated by commas, a space, parentheses, or square brackets. These can
+      be great for looping over. For example, you can loop over a list of colors
+      to generate class names for them.
+
+    - example do
+      :plain
+        $colors: red yellow blue;
+
+        @each $color in $colors {
+          .swatch--\#{$color} {
+            background: $color;
+          }
+        }
+        ===
+        $colors: red orange yellow green blue indigo violet
+
+        @each $color in $colors
+          .swatch--\#{$color}
+            background: $color