Slide 1

Slide 1 text

CSS Custom Properties a.k.a. CSS Variables

Slide 2

Slide 2 text

Sass

Slide 3

Slide 3 text

Sass → CSS

Slide 4

Slide 4 text

CSS

Slide 5

Slide 5 text

CSS

Slide 6

Slide 6 text

What’s the big deal? • part of CSS specification • no compilation • dynamic ✨

Slide 7

Slide 7 text

“Dynamic”…? Behold… *drumroll*

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Custom Properties CSS Custom Properties are a new feature in CSS. I encourage you to experiment with them! 320px 2rem 1rem

Slide 10

Slide 10 text

Custom Properties CSS Custom Properties are a new feature in CSS. I encourage you to experiment with them! 1440px 3rem 1.5rem

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Giving you some information. Warning you about a potential problem. Telling you about a serious error.

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

BTW

Slide 15

Slide 15 text

JavaScript? Demo time!

Slide 16

Slide 16 text

Browser support tl;dr no IE

Slide 17

Slide 17 text

Polyfill? Not really

Slide 18

Slide 18 text

Fallback? Yes. Browsers ignore
 declarations that they don’t understand.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

postcss-custom-properties PostCSS plugin that automatically adds fallbacks for CSS Custom Properties!

Slide 21

Slide 21 text

Try using Custom Properties today! --thanks-for: “listening”;