######################################################
## Sass and SCSS Summarized Documentation Reference ##
######################################################
Contents:
     Command Line Tools________________________Line 29
     Operators_________________________________Line 39
     Data Types________________________________Line 53
     Interpolation_____________________________Line 62
     Comments__________________________________Line 71
     Flags_____________________________________Line 76
     @RULES
          @import______________________________Line 84
          @extend______________________________Line 105
          @debug_______________________________Line 129
          @warn________________________________Line 137
          @if__________________________________Line 144
          @else________________________________Line 152
          @for_________________________________Line 167
          @each________________________________Line 176
          @while_______________________________Line 185
          @mixin_______________________________Line 193
          @inlcude_____________________________Line 221
          @function____________________________Line 226
 
######################################################
# Summary based on Official Sass/SCSS Documentation  #          
######################################################
 
// COMMAND LINE TOOLS //
// NOTE: On .scss and .sass files, order can be reversed for compiling, converting and monitoring 
gem install sass // Install Sass
sass input.scss output.css // Run Sass Compiler On File
sass-convert style.scss style.sass // Convert SCSS File
sass --watch input.scss:output.css // Monitor/Update File
sass --watch app/sass:public/stylesheets // Monitor/Update Directory
sass --help // Help Docs
 
 
// OPERATORS //
==  // Equal to
!=  // Not equal to
+   // Addition / String concatenation
-   // Subtraction
*   // Multiplication
/   // Division - SEE NOTE BELOW OPERATORS
%   // Modulo - Returns remainder after division of 2 numbers: 3 % 2 = 1
<   //  Less than
<=  // Less than or equal to
>   // Great than
>=  // Greater than or equal to
 
 
// DATA TYPES //
Numbers // Any positive or negative integer
String // With or without quotes
Color // CSS color name, hex or rgba
Booleans // true/false/and/or/not
Null // null or empty value
List // Values seperated by , or space
 
 
// INTERPOLATION //
// Syntax: #{} - Used to reference variables within selectors and property names
//example:
          $name: foo;
          $attr: border;
          p.#{$name} {
               #{attr}-color: blue; }
 
 
// COMMENTS //
//     Single line, does not compile to css
/* */  Multiple line, compiles to css 
 
 
// !FLAGS //
!default   // Set variable's value as default if not previously defined
!optional  // Allow @extend to be empty without outputting error
!important // Style always applied regardless of location within document
 
 
// @ RULES //
 
// @IMPORT //
@import //Merge and compile .scss or .sass into current file
//example:
          @import “header.scss”; OR “header.sass”
 
@import (multi) // @import can be used once with multiple files
//example:
          @import “nav.scss, header.scss, footer.scss”;
 
@import (partial) // Sass can be prevented from compiling a .scss or .sass file.
1.  Append underscore to beginning of .scss or .sass filename
2.  Reference filename without underscore in @import statement
 
 
@import (override conditions) // @import can be overrided by the CSS @import rule
  .css filename
  Begins with http://
  If filename is url()
  If import contains media queries
 
 
// @EXTEND //
@extend // Tell one selector to inherit the styles of another selector.
//Multiple @extend calls can be made within a statement.
//example:
          .error {
               border: 1px #f00; }  
          .seriousError {
               @extend .error; }
 
 
@extend (complex selector) // @extend can be used with complex selectors
//example:
          .hoverlink {
               @extend a:hover; }
 
 
@extend (%selector) // Selectors with the placeholder prefix (%) are not rendered until called upon by @extend
//example:
          %selector {
               color: blue; }
          .newSelector {
               @extend %selector; }
 
 
// @DEBUG //
@debug // Prints the value of the SassScript expression
//example:
          @debug 5px + 3px;
//output:
          Line1 DEBUG: 8px;
 
 
// @WARN //
@warn // Prints the value of expression to error output stream.
//example:
          @warn “This is a console error message!”
 
 
// ADVANCED CONTROL DIRECTIVES //
@if // The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null
example:
          p {
               @if 1 + 1 == 2 { color: blue;}
               @if 5 < 3  { color: red;}
               @if null  { color: yellow;}
          }
 
@else / @else if // @else if is used within an @if statement to call another @if function
                 // @else is used at the end of an @if statement to end the evaluation
//example:
          $type: monster;
          p {
               @if $type == ocean {
                    color: blue;
          } @else if $type == matador {
                    color: red;
          } @else $type == monster {
                    color: green;
               }
          }
 
 
@for (form 1) // Iterate through range including <end> value
//example:
          @for $var from <start> through <end>
 
@for (form 2) // Iterate through range up to <end> value
//example:
          @for $var from <start> to <end>
 
 
@each // The each rule sets each $var to each item in the list, then outputs the styles it contains using that value of $var.
//example:
          @each $color in blue, red, yellow {
               .#{$color}-icon {
                    background-image: url('/images#{$color}.png');
                               }
                           }
 
 
@while // Takes a SassScript expression and repeatedly outputs styles until expression evaluates to false
//example:
          $i: 6;
          @while $i > 0 {
               .item-#{$i} { width: 2em * $i; }
                    $i: $i – 2; }
 
 
// @MIXINS //                    
@mixin // Allows the defining of styles that can be reused throughout the stylesheet in addition to taking arguments
//example:
          @mixin large-text {
               font: {
                    family: arial;
                    size: 20px;
                    weight: bold;
                    }
               color: #ff0000; }
 
 
@mixin (arguments) // User specified arguments can be passed to a mixin.  Mixin can also accept a variable number of arguments
//example:
          @mixin sexy-border($color, $width) {
               border: {
                    color: $color;
                    width: $width; }
 
 
@mixin (default arguments) // Arguments can be assigned defaults when no values are passed
//example:
          @mixin sexy-border($color: blue, $width: 1px) {
               border: {
                    color: $color;
                    width: $width; }
 
 
@include // Use to include @mixin with a document
//example:
          .page-title { @include large-text; }
 
 
@function / @return // Custom functions can be created and used throughout the document
                    // @return outputs the current value of the function
//example:
          $grid-width: 40px;
          $gutter-width: 10px;
 
          @function grid-width($n) {
               @return $n * $grid-width + ($n – 1) * $gutter-width; }
 
          #sidebar { width: grid-width(5); }