Tweet
Tweet

Slide 1

Slide 1 text

A long time ago in a galaxy far far away…

Slide 2

Slide 2 text

Revenge of the Platform

Slide 3

Slide 3 text

I'm Simone Amorim, mother and studing for become a Front-End Developer and CSS Evangelist <3 I love running and ride a bike! @simoneas02

Slide 4

Slide 4 text

http://www.w3.org/TR/css-variables/ CSS Custom Properties for Cascading Variables Module Level 1

Slide 5

Slide 5 text

Basics

Slide 6

Slide 6 text

Declare the Custom Properties .luke { --color: #000; --size: 200px; }

Slide 7

Slide 7 text

Use with var() function .luke { --color: #000; --size: 200px; background-color: var(--color); width: var(-size); height: var(-size); }

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

SCope

Slide 10

Slide 10 text

.container { --color: #000; } .box { background-color: var(—cor); } // Bad
O choose
You

Slide 11

Slide 11 text

.container { --color: #000; } .box { background-color: var(—cor); } // Good
I choose You

Slide 12

Slide 12 text

:root { --cor: #000; } .luke { background-color: var(—cor); } .leia { background-color: var(—cor); } // Good

Slide 13

Slide 13 text

FALLBACK

Slide 14

Slide 14 text

Use a second value .yoda { background-color: var(—color, green); width: var(-size, 10px); height: var(-size, 10px); }

Slide 15

Slide 15 text

preprocessors x custom properties

Slide 16

Slide 16 text

Javascript

Slide 17

Slide 17 text

http://codepen.io/danield770/pen/rxqPOM

Slide 18

Slide 18 text

Support

Slide 19

Slide 19 text

http://caniuse.com/#search=variables

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

progressive enhancement

Slide 22

Slide 22 text

Double property trick .yoda { color: green; color: var(—color, green); }

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Para finalizar, o mais importante!

Slide 25

Slide 25 text

Código é só código, o que realmente importa é o que o "codar" pode proporcionar para as pessoas que você ama.. “ - Afonso Pacifer

Slide 26

Slide 26 text

26 days Front-End Study

Slide 27

Slide 27 text

May the force be with you…

Slide 28

Slide 28 text

Thanks @simoneas02