Pré processadores CSS

Um resumo sobre a importância dos pré-processadores no CSS, dando ênfase no SASS

Transcript

1. PRÉ-PROCESSADORES CSS
2. FELLIPE AZAMBUJA femontanha (Montanha) Essa é minha primeira palestra :)
3. ATUALMENTE: Redes sociais como @femontanha
4. EVOLUÇÃO DO CSS A tendência do CSS é sempre crescer, mesmo que nada de novo seja adicionado ao sistema
5. Nenhuma reutilização de código (Código duplicado) Mal organizado Manutenção péssima Override em tudo (Uma classe a mais, !important)
6. CSS + OBJETOS Para tentar reaproveitar o código, implementaram o conceito de objetos Separando o CSS em pequenos blocos, com funções específicas
7. EXEMPLO . t e x t - c e n t e r { t e x t - a l i g n : c e n t e r ; } . r a d i u s - m e d i u m { b o r d e r - r a d i u s : 3 p x ; } < d i v c l a s s = " t e x t - c e n t e r r a d i u s - m e d i u m r i g h t C o l n e w s B u t t o n e t c " > . . . < / d i v >
8. CHEGOU! PRÉ-PROCESSADORES SASS -- LESS -- STYLUS -- (...)
9. Melhor reutilização do código Melhor estruturação do código Manutenção efetiva Melhor qualidade em um tempo igual ou melhor
10. O QUE UM PRÉ-PROCESSADOR TEM DE BOM? Variavéis / Mixins / Funções Loops e Condicionais / Extends / Placeholders Nesting / Importação Matemática / Manipulação de cor / ETC!
11. QUAL É O MELHOR? MAMILOS O melhor é aquele que se encaixa com o seu projeto Com qual você fica mais a vontade de trabalhar
12. SASS Tem mais ou menos 8 anos de idade agora API robusta, testada e atualizada Muitas bibliotecas desenvolvidas Documentação excelente Trabalha bem com "gems" (Ruby)
13. LIBSASS = VELOCIDADE Não trabalha só com Ruby mais Libsass é a nova versão C/C++ do Sass É extremamente mais rápido que a versão do Ruby, mas não a mais veloz
14. SUPORTE DE BIBLIOTECAS Foundation Compass Bootstrap (whynot?) Bourbon.io
15. VARIAVÉIS Setar cores, unidades, tipografia
16. EXTENDS Usar as mesmas propriedades para diversas classes . s i d e - b a r , . l i s t , . m a i n - n a v { m a r g i n : 0 ; p a d d i n g : 0 ; l i s t - s t y l e : n o n e ; }
17. @MIXINS Como se fosse um include de propriedades, com parametrôs!
18. FUNCTIONS Maior poder de programação, porém só retorna dados. Não imprimi propriedades ou seletores.
19. BONS FRAMEWORKS http://bourbon.io/docs
20. ORGANIZAÇÃO
21. ATOMIC DESIGN
22. E MUITO MAIS! Muito obrigado!
23. FELLIPE AZAMBUJA Twitter: @femontanha Github: @femontanha devnaestrada.com.br