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

Dando poder ao seu CSS através de Custom Properties

Dando poder ao seu CSS através de Custom Properties

Larissa Abreu

September 06, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

  1. Dando poder ao seu
    CSS através de
    Custom Properties

    View Slide

  2. @TheSweet_Lari
    Gamer,
    future Suicide Girl
    and Front-end Dev
    Larissa Abreu
    @LarissaAbreu larissaabreu.github.io

    View Slide

  3. Variáveis no CSS?
    Vamos voltar um pouco no tempo

    View Slide

  4. View Slide

  5. Pré-processadores
    https://woliveiras.com.br/posts/pre-processadores-css/

    View Slide

  6. style.styl
    cor = #fff;
    body {
    color: cor;
    }
    style.scss
    $cor: #fff;
    body {
    color: $cor;
    }
    main.css
    body {
    color: #fff;
    }
    Variáveis com pré-
    processadores

    View Slide

  7. View Slide

  8. Custom properties
    Variáveis nativas do CSS

    View Slide

  9. View Slide

  10. Bora codar!

    View Slide

  11. Declarando Custom
    Properties
    http://bit.ly/2Cu0dYY

    View Slide

  12. Usando Custom
    Properties como API de
    estilo
    http://bit.ly/2wRrSNV

    View Slide

  13. Criando “Mixins”
    http://bit.ly/2MTlPTg

    View Slide

  14. Trabalhando com
    fallback
    http://bit.ly/2oOXS0M

    View Slide

  15. Manipulando através do
    JavaScript
    http://bit.ly/2wQMnJR

    View Slide

  16. Design responsivo
    http://bit.ly/2M7v4db

    View Slide

  17. https://caniuse.com/#search=custom%20properties

    View Slide

  18. View Slide

  19. Thanks!
    #UseThePlatform
    @TheSweet_Lari
    @LarissaAbreu
    larissaabreu.github.io

    View Slide