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

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

September 06, 2018
Tweet

Transcript

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

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

    @LarissaAbreu larissaabreu.github.io
  3. Variáveis no CSS? Vamos voltar um pouco no tempo

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

  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
  7. None
  8. Custom properties Variáveis nativas do CSS

  9. None
  10. Bora codar!

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

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

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

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

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

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

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

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