0 to 80 in 40 Minutes

Sass' built-in functions are incredibly powerful, while massively underused. This talk will address all 80 Sass functions, quickly explaining how they work and what to use them for (and yes, some will only get 5 seconds of fame). Presented at SassConf 2015.

Transcript

1. 0 to 80 in 40 minutes https://www.flickr.com/photos/soldiersmediacenter/3907093504
2. https://www.flickr.com/photos/riebart/4466482623 @function
3. Turn your Sass up to eleven https://www.flickr.com/photos/edwinvanbuuringen/12123155456
5. Hi, I'm @Roy https://www.flickr.com/photos/anieto2k/14740073942
6. https://www.flickr.com/photos/anieto2k/14740073942
7. https://www.flickr.com/photos/anieto2k/14740073942 AdvancedSass.com
8. https://www.flickr.com/photos/riebart/4466482623
9. https://www.flickr.com/photos/riebart/4466482623 roy.io/sassconf2015
10. Color https://www.flickr.com/photos/tabor-roeder/16462767919
11. #cc6699
12. https://www.flickr.com/photos/tabor-roeder/16462767919 RGB
13. https://www.flickr.com/photos/riebart/4466482623 rgb(204, 102, 153)
15. https://www.flickr.com/photos/riebart/4466482623 rgb() rgba()
16. // rgb($red, $green, $blue) rgb(204, 102, 153) => #cc6699
17. // rgba($red, $green, $blue, $alpha) rgba(204, 102, 153, 1) => #cc6699 // rgba($color, $alpha) rgba(#cc6699, 0.5) => rgba(204, 102, 153, 0.5)
18. https://www.flickr.com/photos/riebart/4466482623 red() green() blue()
19. red(#cc6699) => 204 green(#cc6699) => 102 blue(#cc6699) => 153
20. https://www.flickr.com/photos/riebart/4466482623 mix()
21. // mix($color1, $color2, $weight: 50%) mix(#cc6699, #669999) => #998099
22. #cc6699 #669999 #998099
23. https://www.flickr.com/photos/tabor-roeder/16462767919 HSL
24. https://www.flickr.com/photos/riebart/4466482623 hsl(330deg, 50%, 60%)
26. https://www.flickr.com/photos/riebart/4466482623 hsl() hsla()
27. // hsl($hue, $saturation, $lightness) hsl(330deg, 50%, 60%) => #cc6699 hsl(330, 50, 60) => #cc6699
28. // hsla($h, $s, $l, $alpha) hsla(330, 50, 60, 1) => #cc6699 hsla(330, 50, 60, 0.5) => rgba(204, 102, 153, 0.5)
29. https://www.flickr.com/photos/riebart/4466482623 hue() saturation() lightness()
30. hue(#cc6699) => 330deg saturation(#cc6699) => 50% lightness(#cc6699) => 60%
31. https://www.flickr.com/photos/riebart/4466482623 adjust-hue()
32. // adjust-hue($color, $degrees) adjust-hue(#cc6699, 45deg) => #cc8066
33. $number-of-colors: 18; $degrees: 360 / $number-of-colors; @for $i from 0 to $number-of-colors { background: adjust-hue( red, $i * $degrees ); }
35. https://www.flickr.com/photos/riebart/4466482623 lighten() darken()
36. lighten(#cc6699, 20%) => #e6b3cc darken(#cc6699, 20%) => #993366
37. #cc6699 #e6brcc
38. #cc6699 #993366
39. https://www.flickr.com/photos/riebart/4466482623 saturate() desaturate()
40. saturate(#cc6699, 20%) => #e05299 desaturate(#cc6699, 20%) => #b87a99
41. #cc6699 #e05299
42. #cc6699 #b87a99
43. https://www.flickr.com/photos/riebart/4466482623 grayscale()
44. grayscale(#cc6699) // == desaturate(#cc6699, 100%) => #999999
45. #cc6699 #999999
46. https://www.flickr.com/photos/riebart/4466482623 complement()
47. complement(#cc6699) // == adjust-hue(#cc6699, 180deg) => #66cc99
48. #cc6699 #66cc99
49. https://www.flickr.com/photos/riebart/4466482623 invert()
50. invert(#cc6699) => #339966 $r = red(#cc6699) $g = green(#cc6699) $b = blue(#cc6699) rgb(255 - $r, 255 - $g, 255 - $b)
51. #cc6699 #339966
52. https://www.flickr.com/photos/tabor-roeder/16462767919 Opacity
53. https://www.flickr.com/photos/riebart/4466482623 alpha() opacity()
54. opacity(#cc6699) => 1 opacity(rgba(#cc6699, 0.5)) => 0.5
55. https://www.flickr.com/photos/riebart/4466482623 opacify() transparentize()
56. opacify(rgba(#cc6699, 0.4), 0.2) => rgba(204, 102, 153, 0.6) transparentize(#cc6699, 0.3) => rgba(204, 102, 153, 0.7)
57. https://www.flickr.com/photos/tabor-roeder/16462767919 Other Color
58. https://www.flickr.com/photos/riebart/4466482623 adjust-color()
59. adjust-color(#cc6699, $blue: -5) => #cc6694 adjust-color( #cc6699, $hue: 20, $alpha: -0.2 ) => rgba(204, 102, 119, 0.8)
60. https://www.flickr.com/photos/riebart/4466482623 scale-color()
61. scale-color( hsl(330deg, 50%, 60%), $lightness: 50% ) => hsl(330deg, 50%, 80%) scale-color( hsl(330deg, 50%, 60%), $lightness: -50% ) => hsl(330deg, 50%, 30%)
62. https://www.flickr.com/photos/riebart/4466482623 change-color()
63. change-color(#cc6699, $blue: 8) => #cc6608 change-color( rgb(204, 102, 153), $red: 100, $alpha: 0.6 ) => rgba(100, 102, 153, 0.6)
64. Strings https://www.flickr.com/photos/andrewfysh/16324676325
65. https://www.flickr.com/photos/riebart/4466482623 quote() unquote()
66. quote(something) => "something" unquote("something") => something
67. https://www.flickr.com/photos/riebart/4466482623 str-length()
68. str-length("something") => 9
69. https://www.flickr.com/photos/riebart/4466482623 str-insert()
70. str-insert("something", "XX", 5) => "someXXstring" str-insert("something", "XX", -4) => "somethXXing"
71. https://www.flickr.com/photos/riebart/4466482623 str-index()
72. str-index("something", "t") => 5 str-index("something", "y") => null
73. https://www.flickr.com/photos/riebart/4466482623 str-slice()
74. str-slice("something", 5) => "thing" str-slice("something", 4, 5) => "et"
75. https://www.flickr.com/photos/riebart/4466482623 to-upper-case() to-lower-case()
76. to-upper-case("sOmEtHiNg") => "SOMETHING" to-lower-case("sOmEtHiNg") => "something"
77. Numbers https://www.flickr.com/photos/nicmcphee/419671493
78. https://www.flickr.com/photos/riebart/4466482623 percentage()
79. percentage(0.5) => 50% percentage(100px / 50px) => 200%
80. https://www.flickr.com/photos/riebart/4466482623 round() ceil() floor()
81. round(10.5) => 11 ceil(7.2) => 8 floor(9.9) => 9
82. https://www.flickr.com/photos/riebart/4466482623 abs()
83. abs(-7px) => 7px
84. $light1: lightness($color1); // 50% $light2: lightness($color2); // 100% $diff: $light1 - $light2; // -50% $diff: abs($light1 - $light2); // 50%
85. https://www.flickr.com/photos/riebart/4466482623 min() max()
86. min(320px, 480px, 768px, 1024px) => 320px max(768px, 320px, 1024px, 480px) => 1024px
87. https://www.flickr.com/photos/riebart/4466482623 random()
88. random() => 0.12797 => 0.60157 => 0.03381 random(10) => 7 => 10 => 5
89. Lists https://www.flickr.com/photos/spilt-milk/2220214594
90. https://www.flickr.com/photos/riebart/4466482623 length()
91. length(768px 320px 1024px 480px) => 4 length((min: 320px, max: 1024px)) => 2
92. https://www.flickr.com/photos/riebart/4466482623 nth()
93. nth(320px 480px 768px 1024px, 2) => 480px
94. https://www.flickr.com/photos/riebart/4466482623 set-nth()
95. // set-nth($list, $n, $value) set-nth(a b c d, 2, X) => a X c d set-nth(a b c d, -1, X) => a b c X
96. https://www.flickr.com/photos/riebart/4466482623 join()
97. $list1: 320px 480px $list2: 768px 1024px $newlist: join($list1, $list2) => 320px 480px 768px 1024px
98. https://www.flickr.com/photos/riebart/4466482623 append()
99. $list: 320px 480px $newlist: append($list, 1024px) => 320px 480px 1024px // $list: append($list, 1024px)
100. $list: 320px, 480px $newlist: join($list, 768px 1024px) => 320px, 480px, 768px, 1024px // $list: join($list, 768px 1024px)
101. https://www.flickr.com/photos/riebart/4466482623 zip()
102. $orientation: portrait landscape $viewports: 320px 480px $zipped: zip($orientation, $viewports) => portrait 320px, landscape 480px
103. https://www.flickr.com/photos/riebart/4466482623 list-separator()
104. list-separator(320px 480px 768px) => space list-separator(phone, tablet) => comma list-separator(something) => space
105. https://www.flickr.com/photos/riebart/4466482623 index()
106. $devices: portrait landscape index($devices, landscape) => 2
107. Maps https://www.flickr.com/photos/futureshape/6790066282
108. https://www.flickr.com/photos/riebart/4466482623 map-get()
109. $sizes: (phone: 320px, tablet: 768px) map-get($sizes, tablet) => 768px
110. https://www.flickr.com/photos/riebart/4466482623 map-has-key()
111. $sizes: (phone: 320px, tablet: 768px) map-has-key($sizes, tablet) => true map-has-key($sizes, boombox) => false
112. https://www.flickr.com/photos/riebart/4466482623 map-keys()
113. $sizes: (phone: 320px, tablet: 768px) map-keys($sizes) => phone, tablet
114. https://www.flickr.com/photos/riebart/4466482623 map-values()
115. $sizes: ( phone: 320px, ereader: 320px, tablet: 768px ) map-values($sizes) => 320px, 320px, 768px
116. https://www.flickr.com/photos/riebart/4466482623 map-remove()
117. $sizes: (phone: 320px, tablet: 768px) $newmap: map-remove($sizes, tablet) => (phone: 320px)
118. https://www.flickr.com/photos/riebart/4466482623 map-merge()
119. $map: (phone: 320px) $map: map-merge( $map, (tablet: 768px) ) => (phone: 320px, tablet: 768px)
120. $map: (phone: 320px, tablet: 768px); $map: map-merge( $map, (phone: 460px, ereader: 600px) ) => ( phone: 460px, tablet: 768px, ereader: 600px )
121. https://www.flickr.com/photos/riebart/4466482623 keywords()
122. @mixin foo($args...) { @debug keywords($args); } @include foo( $phone: 320px, $tablet: 768px ) => phone: 320px, tablet: 768px
123. Introspection https://www.flickr.com/photos/quinnanya/4436502926
124. https://www.flickr.com/photos/riebart/4466482623 feature-exists()
125. feature-exists(at-error) => true // supports @error // global-variable-shadowing // extend-selector-pseudoclass // units-level-3
126. https://www.flickr.com/photos/riebart/4466482623 variable-exists() global-variable-exists()
127. $phone: 320px variable-exists(phone) => true variable-exists(tablet) => false
128. .selector { $phone: 320px variable-exists(phone) => true global-variable-exists(phone) => false }
129. .selector { $phone: 320px !global variable-exists(phone) => true global-variable-exists(phone) => true }
130. https://www.flickr.com/photos/riebart/4466482623 function-exists() mixin-exists()
131. function-exists(map-get) => true function-exists(some-function) => false
132. @function some-function() { @return true; } function-exists(some-function) => true
133. https://www.flickr.com/photos/riebart/4466482623 inspect()
134. $sizes: (phone: 320px) $sizes: join( $sizes, (tablet: 768px) ) inspect($sizes) => (phone: 320px) (tablet: 768px)
135. $sizes: (phone: 320px) $sizes: map-merge( $sizes, (tablet: 768px) ) inspect($sizes) => (phone: 320px, tablet: 768px)
136. https://www.flickr.com/photos/riebart/4466482623 type-of()
137. type-of(100px) => number type-of("tablet") => string type-of(phone) => string type-of(true) => bool type-of(#cc6699) => color
138. https://www.flickr.com/photos/riebart/4466482623 unit() unitless()
139. unit(10rem) => "rem" unitless(10rem) => false unitless(10) => true
140. https://www.flickr.com/photos/riebart/4466482623 comparable()
141. comparable(2px, 1px) => true comparable(100px, 3em) => false comparable(10cm, 3mm) => true
142. https://www.flickr.com/photos/riebart/4466482623 call()
143. call(lighten, #cc6699, 17%) // == lighten(#cc6699, 17%) => #e2a7c4 call(darken, #cc6699, 17%) // == darken(#cc6699, 17%) => #a4376e
144. Miscellaneous https://www.flickr.com/photos/ledgard/101287087
145. https://www.flickr.com/photos/riebart/4466482623 if()
146. // JavaScript: somevar ? "yes!" : "nooo" // Sass: if($somevar, "yes!", "nooo")
147. https://www.flickr.com/photos/riebart/4466482623 unique-id()
148. unique-id() => u98cabd64
149. The ignored https://www.flickr.com/photos/streetmatt/15851429459
150. https://www.flickr.com/photos/riebart/4466482623 is-superselector selector-append selector-unify simple-selectors ie-hex-str selector-nest selector-extend selector-replace selector-parse
152. https://www.flickr.com/photos/debord/4932655275 Questions? Come talk to me!
153. https://www.flickr.com/photos/debord/4932655275 roy.io/sassconf2015 AdvancedSass.com