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…
   

   View Slide

2. Revenge of the Platform
   

   View Slide

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
   

   View Slide

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

   View Slide

5. Basics
   

   View Slide

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

   View Slide

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

   View Slide

8. View Slide

9. SCope
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. FALLBACK
    

    View Slide

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

    View Slide

15. preprocessors x custom properties
    

    View Slide

16. Javascript
    

    View Slide

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

    View Slide

18. Support
    

    View Slide

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

    View Slide

20. View Slide

21. progressive
    enhancement
    

    View Slide

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

    View Slide

23. View Slide

24. Para finalizar,
    o mais importante!
    

    View Slide

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

    View Slide

26. 26 days
    Front-End Study
    

    View Slide

27. May the force be with you…
    

    View Slide

28. Thanks
    @simoneas02
    

    View Slide