Roy Tomeij
November 12, 2015
220

# 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.

## Roy Tomeij

November 12, 2015

## Transcript

15. ### // rgba(\$red, \$green, \$blue, \$alpha) rgba(204, 102, 153, 1) =>

#cc6699 // rgba(\$color, \$alpha) rgba(#cc6699, 0.5) => rgba(204, 102, 153, 0.5)

24. ### // hsl(\$hue, \$saturation, \$lightness) hsl(330deg, 50%, 60%) => #cc6699 hsl(330,

50, 60) => #cc6699
25. ### // hsla(\$h, \$s, \$l, \$alpha) hsla(330, 50, 60, 1) =>

#cc6699 hsla(330, 50, 60, 0.5) => rgba(204, 102, 153, 0.5)

30. ### \$number-of-colors: 18; \$degrees: 360 / \$number-of-colors; @for \$i from 0

to \$number-of-colors { background: adjust-hue( red, \$i * \$degrees ); }

46. ### invert(#cc6699) => #339966 \$r = red(#cc6699) \$g = green(#cc6699) \$b

= blue(#cc6699) rgb(255 - \$r, 255 - \$g, 255 - \$b)

52. ### opacify(rgba(#cc6699, 0.4), 0.2) => rgba(204, 102, 153, 0.6) transparentize(#cc6699, 0.3)

=> rgba(204, 102, 153, 0.7)

55. ### adjust-color(#cc6699, \$blue: -5) => #cc6694 adjust-color( #cc6699, \$hue: 20, \$alpha:

-0.2 ) => rgba(204, 102, 119, 0.8)

57. ### scale-color( hsl(330deg, 50%, 60%), \$lightness: 50% ) => hsl(330deg, 50%,

80%) scale-color( hsl(330deg, 50%, 60%), \$lightness: -50% ) => hsl(330deg, 50%, 30%)

59. ### change-color(#cc6699, \$blue: 8) => #cc6608 change-color( rgb(204, 102, 153), \$red:

100, \$alpha: 0.6 ) => rgba(100, 102, 153, 0.6)

80. ### \$light1: lightness(\$color1); // 50% \$light2: lightness(\$color2); // 100% \$diff: \$light1

- \$light2; // -50% \$diff: abs(\$light1 - \$light2); // 50%

=> 1024px

=> 10 => 5

=> 2

91. ### // 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

93. ### \$list1: 320px 480px \$list2: 768px 1024px \$newlist: join(\$list1, \$list2) =>

320px 480px 768px 1024px

95. ### \$list: 320px 480px \$newlist: append(\$list, 1024px) => 320px 480px 1024px

// \$list: append(\$list, 1024px)
96. ### \$list: 320px, 480px \$newlist: join(\$list, 768px 1024px) => 320px, 480px,

768px, 1024px // \$list: join(\$list, 768px 1024px)

98. ### \$orientation: portrait landscape \$viewports: 320px 480px \$zipped: zip(\$orientation, \$viewports) =>

portrait 320px, landscape 480px

=> space

107. ### \$sizes: (phone: 320px, tablet: 768px) map-has-key(\$sizes, tablet) => true map-has-key(\$sizes,

boombox) => false

111. ### \$sizes: ( phone: 320px, ereader: 320px, tablet: 768px ) map-values(\$sizes)

=> 320px, 320px, 768px

320px)

115. ### \$map: (phone: 320px) \$map: map-merge( \$map, (tablet: 768px) ) =>

(phone: 320px, tablet: 768px)
116. ### \$map: (phone: 320px, tablet: 768px); \$map: map-merge( \$map, (phone: 460px,

ereader: 600px) ) => ( phone: 460px, tablet: 768px, ereader: 600px )

118. ### @mixin foo(\$args...) { @debug keywords(\$args); } @include foo( \$phone: 320px,

\$tablet: 768px ) => phone: 320px, tablet: 768px

121. ### feature-exists(at-error) => true // supports @error // global-variable-shadowing // extend-selector-pseudoclass

// units-level-3

}

true }

130. ### \$sizes: (phone: 320px) \$sizes: join( \$sizes, (tablet: 768px) ) inspect(\$sizes)

=> (phone: 320px) (tablet: 768px)
131. ### \$sizes: (phone: 320px) \$sizes: map-merge( \$sizes, (tablet: 768px) ) inspect(\$sizes)

=> (phone: 320px, tablet: 768px)

133. ### type-of(100px) => number type-of("tablet") => string type-of(phone) => string type-of(true)

=> bool type-of(#cc6699) => color

=> true

139. ### call(lighten, #cc6699, 17%) // == lighten(#cc6699, 17%) => #e2a7c4 call(darken,

#cc6699, 17%) // == darken(#cc6699, 17%) => #a4376e

142. ### // JavaScript: somevar ? "yes!" : "nooo" // Sass: if(\$somevar,

"yes!", "nooo")