Variáveis Nativas com CSS

Variáveis Nativas com CSS x Variáveis em pre-processadores

Transcript

1. A long time ago in a galaxy far far away…
2. Revenge of the Platform
3. 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
4. http://www.w3.org/TR/css-variables/ CSS Custom Properties for Cascading Variables Module Level 1
5. Basics
6. Declare the Custom Properties .luke { --color: #000; --size: 200px; }
7. Use with var() function .luke { --color: #000; --size: 200px; background-color: var(--color); width: var(-size); height: var(-size); }
9. SCope
10. .container { --color: #000; } .box { background-color: var(—cor); } // Bad <div class=“container”> O choose </div> <div class=“box”> You </div>
11. .container { --color: #000; } .box { background-color: var(—cor); } // Good <div class=“container”> <div class=“box”> I choose You </div> </div>
12. :root { --cor: #000; } .luke { background-color: var(—cor); } .leia { background-color: var(—cor); } // Good
13. FALLBACK
14. Use a second value .yoda { background-color: var(—color, green); width: var(-size, 10px); height: var(-size, 10px); }
15. preprocessors x custom properties
16. Javascript
17. http://codepen.io/danield770/pen/rxqPOM
18. Support
19. http://caniuse.com/#search=variables
21. progressive enhancement
22. Double property trick .yoda { color: green; color: var(—color, green); }
24. Para finalizar, o mais importante!
25. Código é só código, o que realmente importa é o que o "codar" pode proporcionar para as pessoas que você ama.. “ - Afonso Pacifer
26. 26 days Front-End Study
27. May the force be with you…
28. Thanks @simoneas02