Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Variáveis Nativas com CSS

Variáveis Nativas com CSS

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

Simone Amorim

February 11, 2017
Tweet

More Decks by Simone Amorim

Other Decks in Technology

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