Variáveis Nativas com CSS x Variáveis em pre-processadores
A long time ago in a galaxy far far away…
View Slide
Revenge of the Platform
I'm Simone Amorim, mother and studing for becomea Front-End Developer and CSS Evangelist <3I love running and ride a bike!@simoneas02
http://www.w3.org/TR/css-variables/CSS Custom Propertiesfor Cascading Variables Module Level 1
Basics
Declare the Custom Properties.luke {--color: #000;--size: 200px;}
Use with var() function.luke {--color: #000;--size: 200px;background-color: var(--color);width: var(-size);height: var(-size);}
SCope
.container {--color: #000;}.box {background-color: var(—cor);}// BadO chooseYou
.container {--color: #000;}.box {background-color: var(—cor);}// GoodI choose You
:root {--cor: #000;}.luke {background-color: var(—cor);}.leia {background-color: var(—cor);}// Good
FALLBACK
Use a second value.yoda {background-color: var(—color, green);width: var(-size, 10px);height: var(-size, 10px);}
preprocessors x custom properties
Javascript
http://codepen.io/danield770/pen/rxqPOM
Support
http://caniuse.com/#search=variables
progressiveenhancement
Double property trick.yoda {color: green;color: var(—color, green);}
Para finalizar,o mais importante!
Código é só código, o que realmente importaé o que o "codar" pode proporcionar paraas pessoas que você ama..“- Afonso Pacifer
26 daysFront-End Study
May the force be with you…
Thanks@simoneas02