Upgrade to Pro — share decks privately, control downloads, hide ads and more …

0 to 80 in 40 Minutes

Roy Tomeij
November 12, 2015

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
Tweet

More Decks by Roy Tomeij

Other Decks in Programming

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

  4. None
  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)

  14. None
  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%)

  25. None
  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 ); }
  34. None
  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

  151. None
  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