Revision: 60350
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 4, 2012 21:38 by nshakin
Initial Code
######################################################
## 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); }
Initial URL
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
Initial Description
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.
Initial Title
Sass/SCSS Documentation Reference
Initial Tags
css
Initial Language
SASS