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
   

   View Slide

2. https://www.flickr.com/photos/riebart/4466482623
   @function
   

   View Slide

3. Turn your Sass
   up to eleven
   https://www.flickr.com/photos/edwinvanbuuringen/12123155456
   

   View Slide

4. View Slide

5. Hi, I'm @Roy
   https://www.flickr.com/photos/anieto2k/14740073942
   

   View Slide

6. https://www.flickr.com/photos/anieto2k/14740073942
   

   View Slide

7. https://www.flickr.com/photos/anieto2k/14740073942
   AdvancedSass.com
   

   View Slide

8. https://www.flickr.com/photos/riebart/4466482623
   

   View Slide

9. https://www.flickr.com/photos/riebart/4466482623
   roy.io/sassconf2015
   

   View Slide

10. Color
    https://www.flickr.com/photos/tabor-roeder/16462767919
    

    View Slide

11. #cc6699
    

    View Slide

12. https://www.flickr.com/photos/tabor-roeder/16462767919
    RGB
    

    View Slide

13. https://www.flickr.com/photos/riebart/4466482623
    rgb(204, 102, 153)
    

    View Slide

14. View Slide

15. https://www.flickr.com/photos/riebart/4466482623
    rgb()
    rgba()
    

    View Slide

16. // rgb($red, $green, $blue)
    rgb(204, 102, 153)
    => #cc6699
    

    View Slide

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)
    

    View Slide

18. https://www.flickr.com/photos/riebart/4466482623
    red()
    green()
    blue()
    

    View Slide

19. red(#cc6699)
    => 204
    green(#cc6699)
    => 102
    blue(#cc6699)
    => 153
    

    View Slide

20. https://www.flickr.com/photos/riebart/4466482623
    mix()
    

    View Slide

21. // mix($color1, $color2, $weight: 50%)
    mix(#cc6699, #669999)
    => #998099
    

    View Slide

22. #cc6699 #669999 #998099
    

    View Slide

23. https://www.flickr.com/photos/tabor-roeder/16462767919
    HSL
    

    View Slide

24. https://www.flickr.com/photos/riebart/4466482623
    hsl(330deg, 50%, 60%)
    

    View Slide

25. View Slide

26. https://www.flickr.com/photos/riebart/4466482623
    hsl()
    hsla()
    

    View Slide

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

    View Slide

28. // hsla($h, $s, $l, $alpha)
    hsla(330, 50, 60, 1)
    => #cc6699
    hsla(330, 50, 60, 0.5)
    => rgba(204, 102, 153, 0.5)
    

    View Slide

29. https://www.flickr.com/photos/riebart/4466482623
    hue()
    saturation()
    lightness()
    

    View Slide

30. hue(#cc6699)
    => 330deg
    saturation(#cc6699)
    => 50%
    lightness(#cc6699)
    => 60%
    

    View Slide

31. https://www.flickr.com/photos/riebart/4466482623
    adjust-hue()
    

    View Slide

32. // adjust-hue($color, $degrees)
    adjust-hue(#cc6699, 45deg)
    => #cc8066
    

    View Slide

33. $number-of-colors: 18;
    $degrees: 360 / $number-of-colors;
    @for $i from 0 to $number-of-colors {
    background: adjust-hue(
    red,
    $i * $degrees
    );
    }
    

    View Slide

34. View Slide

35. https://www.flickr.com/photos/riebart/4466482623
    lighten()
    darken()
    

    View Slide

36. lighten(#cc6699, 20%)
    => #e6b3cc
    darken(#cc6699, 20%)
    => #993366
    

    View Slide

37. #cc6699 #e6brcc
    

    View Slide

38. #cc6699 #993366
    

    View Slide

39. https://www.flickr.com/photos/riebart/4466482623
    saturate()
    desaturate()
    

    View Slide

40. saturate(#cc6699, 20%)
    => #e05299
    desaturate(#cc6699, 20%)
    => #b87a99
    

    View Slide

41. #cc6699 #e05299
    

    View Slide

42. #cc6699 #b87a99
    

    View Slide

43. https://www.flickr.com/photos/riebart/4466482623
    grayscale()
    

    View Slide

44. grayscale(#cc6699)
    // == desaturate(#cc6699, 100%)
    => #999999
    

    View Slide

45. #cc6699 #999999
    

    View Slide

46. https://www.flickr.com/photos/riebart/4466482623
    complement()
    

    View Slide

47. complement(#cc6699)
    // == adjust-hue(#cc6699, 180deg)
    => #66cc99
    

    View Slide

48. #cc6699 #66cc99
    

    View Slide

49. https://www.flickr.com/photos/riebart/4466482623
    invert()
    

    View Slide

50. invert(#cc6699)
    => #339966
    $r = red(#cc6699)
    $g = green(#cc6699)
    $b = blue(#cc6699)
    rgb(255 - $r, 255 - $g, 255 - $b)
    

    View Slide

51. #cc6699 #339966
    

    View Slide

52. https://www.flickr.com/photos/tabor-roeder/16462767919
    Opacity
    

    View Slide

53. https://www.flickr.com/photos/riebart/4466482623
    alpha()
    opacity()
    

    View Slide

54. opacity(#cc6699)
    => 1
    opacity(rgba(#cc6699, 0.5))
    => 0.5
    

    View Slide

55. https://www.flickr.com/photos/riebart/4466482623
    opacify()
    transparentize()
    

    View Slide

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

    View Slide

57. https://www.flickr.com/photos/tabor-roeder/16462767919
    Other Color
    

    View Slide

58. https://www.flickr.com/photos/riebart/4466482623
    adjust-color()
    

    View Slide

59. adjust-color(#cc6699, $blue: -5)
    => #cc6694
    adjust-color(
    #cc6699,
    $hue: 20,
    $alpha: -0.2
    )
    => rgba(204, 102, 119, 0.8)
    

    View Slide

60. https://www.flickr.com/photos/riebart/4466482623
    scale-color()
    

    View Slide

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%)
    

    View Slide

62. https://www.flickr.com/photos/riebart/4466482623
    change-color()
    

    View Slide

63. change-color(#cc6699, $blue: 8)
    => #cc6608
    change-color(
    rgb(204, 102, 153),
    $red: 100,
    $alpha: 0.6
    )
    => rgba(100, 102, 153, 0.6)
    

    View Slide

64. Strings
    https://www.flickr.com/photos/andrewfysh/16324676325
    

    View Slide

65. https://www.flickr.com/photos/riebart/4466482623
    quote()
    unquote()
    

    View Slide

66. quote(something)
    => "something"
    unquote("something")
    => something
    

    View Slide

67. https://www.flickr.com/photos/riebart/4466482623
    str-length()
    

    View Slide

68. str-length("something")
    => 9
    

    View Slide

69. https://www.flickr.com/photos/riebart/4466482623
    str-insert()
    

    View Slide

70. str-insert("something", "XX", 5)
    => "someXXstring"
    str-insert("something", "XX", -4)
    => "somethXXing"
    

    View Slide

71. https://www.flickr.com/photos/riebart/4466482623
    str-index()
    

    View Slide

72. str-index("something", "t")
    => 5
    str-index("something", "y")
    => null
    

    View Slide

73. https://www.flickr.com/photos/riebart/4466482623
    str-slice()
    

    View Slide

74. str-slice("something", 5)
    => "thing"
    str-slice("something", 4, 5)
    => "et"
    

    View Slide

75. https://www.flickr.com/photos/riebart/4466482623
    to-upper-case()
    to-lower-case()
    

    View Slide

76. to-upper-case("sOmEtHiNg")
    => "SOMETHING"
    to-lower-case("sOmEtHiNg")
    => "something"
    

    View Slide

77. Numbers
    https://www.flickr.com/photos/nicmcphee/419671493
    

    View Slide

78. https://www.flickr.com/photos/riebart/4466482623
    percentage()
    

    View Slide

79. percentage(0.5)
    => 50%
    percentage(100px / 50px)
    => 200%
    

    View Slide

80. https://www.flickr.com/photos/riebart/4466482623
    round()
    ceil()
    floor()
    

    View Slide

81. round(10.5)
    => 11
    ceil(7.2)
    => 8
    floor(9.9)
    => 9
    

    View Slide

82. https://www.flickr.com/photos/riebart/4466482623
    abs()
    

    View Slide

83. abs(-7px)
    => 7px
    

    View Slide

84. $light1: lightness($color1); // 50%
    $light2: lightness($color2); // 100%
    $diff: $light1 - $light2; // -50%
    $diff: abs($light1 - $light2); // 50%
    

    View Slide

85. https://www.flickr.com/photos/riebart/4466482623
    min()
    max()
    

    View Slide

86. min(320px, 480px, 768px, 1024px)
    => 320px
    max(768px, 320px, 1024px, 480px)
    => 1024px
    

    View Slide

87. https://www.flickr.com/photos/riebart/4466482623
    random()
    

    View Slide

88. random()
    => 0.12797
    => 0.60157
    => 0.03381
    random(10)
    => 7
    => 10
    => 5
    

    View Slide

89. Lists
    https://www.flickr.com/photos/spilt-milk/2220214594
    

    View Slide

90. https://www.flickr.com/photos/riebart/4466482623
    length()
    

    View Slide

91. length(768px 320px 1024px 480px)
    => 4
    length((min: 320px, max: 1024px))
    => 2
    

    View Slide

92. https://www.flickr.com/photos/riebart/4466482623
    nth()
    

    View Slide

93. nth(320px 480px 768px 1024px, 2)
    => 480px
    

    View Slide

94. https://www.flickr.com/photos/riebart/4466482623
    set-nth()
    

    View Slide

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
    

    View Slide

96. https://www.flickr.com/photos/riebart/4466482623
    join()
    

    View Slide

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

    View Slide

98. https://www.flickr.com/photos/riebart/4466482623
    append()
    

    View Slide

99. $list: 320px 480px
    $newlist: append($list, 1024px)
    => 320px 480px 1024px
    // $list: append($list, 1024px)
    

    View Slide

100. $list: 320px, 480px
     $newlist: join($list, 768px 1024px)
     => 320px, 480px, 768px, 1024px
     // $list: join($list, 768px 1024px)
     

     View Slide

101. https://www.flickr.com/photos/riebart/4466482623
     zip()
     

     View Slide

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

     View Slide

103. https://www.flickr.com/photos/riebart/4466482623
     list-separator()
     

     View Slide

104. list-separator(320px 480px 768px)
     => space
     list-separator(phone, tablet)
     => comma
     list-separator(something)
     => space
     

     View Slide

105. https://www.flickr.com/photos/riebart/4466482623
     index()
     

     View Slide

106. $devices: portrait landscape
     index($devices, landscape)
     => 2
     

     View Slide

107. Maps
     https://www.flickr.com/photos/futureshape/6790066282
     

     View Slide

108. https://www.flickr.com/photos/riebart/4466482623
     map-get()
     

     View Slide

109. $sizes: (phone: 320px, tablet: 768px)
     map-get($sizes, tablet)
     => 768px
     

     View Slide

110. https://www.flickr.com/photos/riebart/4466482623
     map-has-key()
     

     View Slide

111. $sizes: (phone: 320px, tablet: 768px)
     map-has-key($sizes, tablet)
     => true
     map-has-key($sizes, boombox)
     => false
     

     View Slide

112. https://www.flickr.com/photos/riebart/4466482623
     map-keys()
     

     View Slide

113. $sizes: (phone: 320px, tablet: 768px)
     map-keys($sizes)
     => phone, tablet
     

     View Slide

114. https://www.flickr.com/photos/riebart/4466482623
     map-values()
     

     View Slide

115. $sizes: (
     phone: 320px,
     ereader: 320px,
     tablet: 768px
     )
     map-values($sizes)
     => 320px, 320px, 768px
     

     View Slide

116. https://www.flickr.com/photos/riebart/4466482623
     map-remove()
     

     View Slide

117. $sizes: (phone: 320px, tablet: 768px)
     $newmap: map-remove($sizes, tablet)
     => (phone: 320px)
     

     View Slide

118. https://www.flickr.com/photos/riebart/4466482623
     map-merge()
     

     View Slide

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

     View Slide

120. $map: (phone: 320px, tablet: 768px);
     $map: map-merge(
     $map,
     (phone: 460px, ereader: 600px)
     )
     => ( phone: 460px,
     tablet: 768px,
     ereader: 600px )
     

     View Slide

121. https://www.flickr.com/photos/riebart/4466482623
     keywords()
     

     View Slide

122. @mixin foo($args...) {
     @debug keywords($args);
     }
     @include foo(
     $phone: 320px,
     $tablet: 768px
     )
     => phone: 320px, tablet: 768px
     

     View Slide

123. Introspection
     https://www.flickr.com/photos/quinnanya/4436502926
     

     View Slide

124. https://www.flickr.com/photos/riebart/4466482623
     feature-exists()
     

     View Slide

125. feature-exists(at-error)
     => true // supports @error
     // global-variable-shadowing
     // extend-selector-pseudoclass
     // units-level-3
     

     View Slide

126. https://www.flickr.com/photos/riebart/4466482623
     variable-exists()
     global-variable-exists()
     

     View Slide

127. $phone: 320px
     variable-exists(phone)
     => true
     variable-exists(tablet)
     => false
     

     View Slide

128. .selector {
     $phone: 320px
     variable-exists(phone)
     => true
     global-variable-exists(phone)
     => false
     }
     

     View Slide

129. .selector {
     $phone: 320px !global
     variable-exists(phone)
     => true
     global-variable-exists(phone)
     => true
     }
     

     View Slide

130. https://www.flickr.com/photos/riebart/4466482623
     function-exists()
     mixin-exists()
     

     View Slide

131. function-exists(map-get)
     => true
     function-exists(some-function)
     => false
     

     View Slide

132. @function some-function() {
     @return true;
     }
     function-exists(some-function)
     => true
     

     View Slide

133. https://www.flickr.com/photos/riebart/4466482623
     inspect()
     

     View Slide

134. $sizes: (phone: 320px)
     $sizes: join(
     $sizes,
     (tablet: 768px)
     )
     inspect($sizes)
     => (phone: 320px) (tablet: 768px)
     

     View Slide

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

     View Slide

136. https://www.flickr.com/photos/riebart/4466482623
     type-of()
     

     View Slide

137. type-of(100px) => number
     type-of("tablet") => string
     type-of(phone) => string
     type-of(true) => bool
     type-of(#cc6699) => color
     

     View Slide

138. https://www.flickr.com/photos/riebart/4466482623
     unit()
     unitless()
     

     View Slide

139. unit(10rem)
     => "rem"
     unitless(10rem)
     => false
     unitless(10)
     => true
     

     View Slide

140. https://www.flickr.com/photos/riebart/4466482623
     comparable()
     

     View Slide

141. comparable(2px, 1px)
     => true
     comparable(100px, 3em)
     => false
     comparable(10cm, 3mm)
     => true
     

     View Slide

142. https://www.flickr.com/photos/riebart/4466482623
     call()
     

     View Slide

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

     View Slide

144. Miscellaneous
     https://www.flickr.com/photos/ledgard/101287087
     

     View Slide

145. https://www.flickr.com/photos/riebart/4466482623
     if()
     

     View Slide

146. // JavaScript:
     somevar ? "yes!" : "nooo"
     // Sass:
     if($somevar, "yes!", "nooo")
     

     View Slide

147. https://www.flickr.com/photos/riebart/4466482623
     unique-id()
     

     View Slide

148. unique-id()
     => u98cabd64
     

     View Slide

149. The ignored
     https://www.flickr.com/photos/streetmatt/15851429459
     

     View Slide

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
     

     View Slide

151. View Slide

152. https://www.flickr.com/photos/debord/4932655275
     Questions?
     Come talk to me!
     

     View Slide

153. https://www.flickr.com/photos/debord/4932655275
     roy.io/sassconf2015
     AdvancedSass.com
     

     View Slide