# Posted By

nshakin on 11/04/12

# Statistics

Viewed 317 times
Favorited by 0 user(s)

# Sass/SCSS Function Reference

/ Published in: SASS

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.