Posted By

nshakin on 11/04/12

Tagged

Versions (?)

Last Edited at 11/04/12 09:38pm

Statistics

Viewed 840 times

Favorited by 0 user(s)

Related snippets

Sass/SCSS Documentation Reference

/ Published in: SASS

I recently wanted to learn Sass and after reading the documentation I looked around for a more concise set of docs to reference while writing but couldn't find anything. So I made my own based off of what was in the documentation of Sass's website.

Not everything is there at the moment buts its a nice reference for someone new to Sass and still feeling their way around.

Highlighted TextExpand

######################################################
## 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); }

URL: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.