Sass/SCSS Function Reference


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

A concise reference listing all of the available functions built into Sass.


Copy this code and paste it in your HTML
  1. ######################################################
  2. ## Sass and SCSS Function Reference ##
  3. ######################################################
  4. Contents:
  5. RGB Functions__________________________________Line 19
  6. HSL Functions__________________________________Line 29
  7. Opacity Functions______________________________Line 45
  8. Other Color Functions__________________________Line 52
  9. String Functions_______________________________Line 63
  10. Number Functions_______________________________Line 68
  11. List Functions_________________________________Line 78
  12. Introspective Functions________________________Line 85
  13. Misc Functions_________________________________Line 92
  14.  
  15. ######################################################
  16. # Summary based on Official Sass/SCSS Documentation #
  17. ######################################################
  18.  
  19.  
  20. // RGB FUNCTIONS //
  21. rgb($red, $green, $blue) // Converts an rgb(red, green, blue) triplet into a color.
  22. rgba($red, $green, $blue, $alpha) // Converts an rgba(red, green, blue, alpha) quadruplet into a color.
  23. rgba($color, $alpha) // Adds an alpha layer to any color value.
  24. red($color) // Gets the red component of a color.
  25. green($color) // Gets the green component of a color.
  26. blue($color) // Gets the blue component of a color.
  27. mix($color-1, $color-2, [$weight]) // Mixes two colors together.
  28.  
  29.  
  30. // HSL FUNCTIONS //
  31. hsl($hue, $saturation, $lightness) // Converts an hsl(hue, saturation, lightness) triplet into a color.
  32. hsla($hue, $saturation, $lightness, $alpha) // Converts an hsla(hue, saturation, lightness, alpha) quadruplet into a color.
  33. hue($color) // Gets the hue component of a color.
  34. saturation($color) // Gets the saturation component of a color.
  35. lightness($color) // Gets the lightness component of a color.
  36. adjust-hue($color, $degrees) // Changes the hue of a color.
  37. lighten($color, $amount) // Makes a color lighter.
  38. darken($color, $amount) // Makes a color darker.
  39. saturate($color, $amount) // Makes a color more saturated.
  40. desaturate($color, $amount) // Makes a color less saturated.
  41. grayscale($color) // Converts a color to grayscale.
  42. complement($color) // Returns the complement of a color.
  43. invert($color) // Returns the inverse of a color.
  44.  
  45.  
  46. // OPACITY FUNCTIONS //
  47. alpha($color) / opacity($color) // Gets the alpha component (opacity) of a color.
  48. rgba($color, $alpha) // Add or change an alpha layer for any color value.
  49. opacify($color, $amount) / fade-in($color, $amount) // Makes a color more opaque.
  50. transparentize($color, $amount) / fade-out($color, $amount) // Makes a color more transparent.
  51.  
  52.  
  53. // OTHER COLOR FUNCTIONS //
  54. adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
  55. // Increase or decrease any of the components of a color.
  56. scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
  57. // Fluidly scale one or more components of a color.
  58. change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
  59. // Changes one or more properties of a color.
  60. ie-hex-str($color)
  61. // Converts a color into the format understood by IE filters.
  62.  
  63.  
  64. // STRING FUNCTIONS //
  65. unquote($string) // Removes the quotes from a string.
  66. quote($string) // Adds quotes to a string.
  67.  
  68.  
  69. // NUMBER FUNCTIONS //
  70. percentage($value) // Converts a unitless number to a percentage.
  71. round($value) // Rounds a number to the nearest whole number.
  72. ceil($value) // Rounds a number up to the nearest whole number.
  73. floor($value) // Rounds a number down to the nearest whole number.
  74. abs($value) // Returns the absolute value of a number.
  75. min($x1, $x2, �) // Finds the minimum of several values.
  76. max($x1, $x2, �) // Finds the maximum of several values.
  77.  
  78.  
  79. // LIST FUNCTIONS //
  80. length($list) // Returns the length of a list.
  81. nth($list, $n) // Returns a specific item in a list.
  82. join($list1, $list2, [$separator]) // Joins together two lists into one.
  83. append($list1, $val, [$separator]) // Appends a single value onto the end of a list.
  84.  
  85.  
  86. // INTROSPECTIVE FUNCTIONS //
  87. type-of($value) // Returns the type of a value.
  88. unit($number) // Returns the units associated with a number.
  89. unitless($number) // Returns whether a number has units or not.
  90. comparable($number-1, $number-2) // Returns whether two numbers can be added or compared.
  91.  
  92.  
  93. // MISC FUNCTIONS //
  94. if($condition, $if-true, $if-false) // Returns one of two values, depending on whether or not a condition is true.

URL: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.