Dando poder ao seu CSS através de Custom Properties

Links e Referências:

- https://tableless.com.br/utilizando-mixins-em-css-preprocessors/
- https://css-tricks.com/css-custom-properties-theming/
- https://www.w3.org/TR/css-variables/
- https://www.w3.org/TR/css-variables/
- https://css-tricks.com/making-custom-properties-css-variables-dynamic/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- http://maujor.com/tutorial/variaveis-nas-css.php
- https://www.youtube.com/watch?v=NAp1FX9mGPU&list=PLgcWRW66amTnK9RhsViFHd3B7-pUW02U1

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