Sass/SCSS Documentation Reference


/ Published in: SASS
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  1. ######################################################
  2. ## Sass and SCSS Summarized Documentation Reference ##
  3. ######################################################
  4. Contents:
  5. Command Line Tools________________________Line 29
  6. Operators_________________________________Line 39
  7. Data Types________________________________Line 53
  8. Interpolation_____________________________Line 62
  9. Comments__________________________________Line 71
  10. Flags_____________________________________Line 76
  11. @RULES
  12. @import______________________________Line 84
  13. @extend______________________________Line 105
  14. @debug_______________________________Line 129
  15. @warn________________________________Line 137
  16. @if__________________________________Line 144
  17. @else________________________________Line 152
  18. @for_________________________________Line 167
  19. @each________________________________Line 176
  20. @while_______________________________Line 185
  21. @mixin_______________________________Line 193
  22. @inlcude_____________________________Line 221
  23. @function____________________________Line 226
  24.  
  25. ######################################################
  26. # Summary based on Official Sass/SCSS Documentation #
  27. ######################################################
  28.  
  29. // COMMAND LINE TOOLS //
  30. // NOTE: On .scss and .sass files, order can be reversed for compiling, converting and monitoring
  31. gem install sass // Install Sass
  32. sass input.scss output.css // Run Sass Compiler On File
  33. sass-convert style.scss style.sass // Convert SCSS File
  34. sass --watch input.scss:output.css // Monitor/Update File
  35. sass --watch app/sass:public/stylesheets // Monitor/Update Directory
  36. sass --help // Help Docs
  37.  
  38.  
  39. // OPERATORS //
  40. == // Equal to
  41. != // Not equal to
  42. + // Addition / String concatenation
  43. - // Subtraction
  44. * // Multiplication
  45. / // Division - SEE NOTE BELOW OPERATORS
  46. % // Modulo - Returns remainder after division of 2 numbers: 3 % 2 = 1
  47. < // Less than
  48. <= // Less than or equal to
  49. > // Great than
  50. >= // Greater than or equal to
  51.  
  52.  
  53. // DATA TYPES //
  54. Numbers // Any positive or negative integer
  55. String // With or without quotes
  56. Color // CSS color name, hex or rgba
  57. Booleans // true/false/and/or/not
  58. Null // null or empty value
  59. List // Values seperated by , or space
  60.  
  61.  
  62. // INTERPOLATION //
  63. // Syntax: #{} - Used to reference variables within selectors and property names
  64. //example:
  65. $name: foo;
  66. $attr: border;
  67. p.#{$name} {
  68. #{attr}-color: blue; }
  69.  
  70.  
  71. // COMMENTS //
  72. // Single line, does not compile to css
  73. /* */ Multiple line, compiles to css
  74.  
  75.  
  76. // !FLAGS //
  77. !default // Set variable's value as default if not previously defined
  78. !optional // Allow @extend to be empty without outputting error
  79. !important // Style always applied regardless of location within document
  80.  
  81.  
  82. // @ RULES //
  83.  
  84. // @IMPORT //
  85. @import //Merge and compile .scss or .sass into current file
  86. //example:
  87. @import “header.scss”; OR “header.sass”
  88.  
  89. @import (multi) // @import can be used once with multiple files
  90. //example:
  91. @import “nav.scss, header.scss, footer.scss”;
  92.  
  93. @import (partial) // Sass can be prevented from compiling a .scss or .sass file.
  94. 1. Append underscore to beginning of .scss or .sass filename
  95. 2. Reference filename without underscore in @import statement
  96.  
  97.  
  98. @import (override conditions) // @import can be overrided by the CSS @import rule
  99. .css filename
  100. Begins with http://
  101. If filename is url()
  102. If import contains media queries
  103.  
  104.  
  105. // @EXTEND //
  106. @extend // Tell one selector to inherit the styles of another selector.
  107. //Multiple @extend calls can be made within a statement.
  108. //example:
  109. .error {
  110. border: 1px #f00; }
  111. .seriousError {
  112. @extend .error; }
  113.  
  114.  
  115. @extend (complex selector) // @extend can be used with complex selectors
  116. //example:
  117. .hoverlink {
  118. @extend a:hover; }
  119.  
  120.  
  121. @extend (%selector) // Selectors with the placeholder prefix (%) are not rendered until called upon by @extend
  122. //example:
  123. %selector {
  124. color: blue; }
  125. .newSelector {
  126. @extend %selector; }
  127.  
  128.  
  129. // @DEBUG //
  130. @debug // Prints the value of the SassScript expression
  131. //example:
  132. @debug 5px + 3px;
  133. //output:
  134. Line1 DEBUG: 8px;
  135.  
  136.  
  137. // @WARN //
  138. @warn // Prints the value of expression to error output stream.
  139. //example:
  140. @warn “This is a console error message!”
  141.  
  142.  
  143. // ADVANCED CONTROL DIRECTIVES //
  144. @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
  145. example:
  146. p {
  147. @if 1 + 1 == 2 { color: blue;}
  148. @if 5 < 3 { color: red;}
  149. @if null { color: yellow;}
  150. }
  151.  
  152. @else / @else if // @else if is used within an @if statement to call another @if function
  153. // @else is used at the end of an @if statement to end the evaluation
  154. //example:
  155. $type: monster;
  156. p {
  157. @if $type == ocean {
  158. color: blue;
  159. } @else if $type == matador {
  160. color: red;
  161. } @else $type == monster {
  162. color: green;
  163. }
  164. }
  165.  
  166.  
  167. @for (form 1) // Iterate through range including <end> value
  168. //example:
  169. @for $var from <start> through <end>
  170.  
  171. @for (form 2) // Iterate through range up to <end> value
  172. //example:
  173. @for $var from <start> to <end>
  174.  
  175.  
  176. @each // The each rule sets each $var to each item in the list, then outputs the styles it contains using that value of $var.
  177. //example:
  178. @each $color in blue, red, yellow {
  179. .#{$color}-icon {
  180. background-image: url('/images#{$color}.png');
  181. }
  182. }
  183.  
  184.  
  185. @while // Takes a SassScript expression and repeatedly outputs styles until expression evaluates to false
  186. //example:
  187. $i: 6;
  188. @while $i > 0 {
  189. .item-#{$i} { width: 2em * $i; }
  190. $i: $i – 2; }
  191.  
  192.  
  193. // @MIXINS //
  194. @mixin // Allows the defining of styles that can be reused throughout the stylesheet in addition to taking arguments
  195. //example:
  196. @mixin large-text {
  197. font: {
  198. family: arial;
  199. size: 20px;
  200. weight: bold;
  201. }
  202. color: #ff0000; }
  203.  
  204.  
  205. @mixin (arguments) // User specified arguments can be passed to a mixin. Mixin can also accept a variable number of arguments
  206. //example:
  207. @mixin sexy-border($color, $width) {
  208. border: {
  209. color: $color;
  210. width: $width; }
  211.  
  212.  
  213. @mixin (default arguments) // Arguments can be assigned defaults when no values are passed
  214. //example:
  215. @mixin sexy-border($color: blue, $width: 1px) {
  216. border: {
  217. color: $color;
  218. width: $width; }
  219.  
  220.  
  221. @include // Use to include @mixin with a document
  222. //example:
  223. .page-title { @include large-text; }
  224.  
  225.  
  226. @function / @return // Custom functions can be created and used throughout the document
  227. // @return outputs the current value of the function
  228. //example:
  229. $grid-width: 40px;
  230. $gutter-width: 10px;
  231.  
  232. @function grid-width($n) {
  233. @return $n * $grid-width + ($n – 1) * $gutter-width; }
  234.  
  235. #sidebar { width: grid-width(5); }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.