CSS Level-up

Para poder lançar o uso de features e funcionalidades de linguagens de programação mais completas, podemos lançar mão do uso de pré-processadores e ferramentas de automação de tarefas.

Este deck ajuda a compreender principais diferenças e como começar a utilizar estas ferramentas hoje.

Transcript

1. CSS Level-up @AtilaFassina
2. @AtilaFassina AtilaFassina.com
3. Compilação .styl .scss . sass .less .css Node.js Ruby Javascript Ruby
4. CSS vars, functions, if/else, módulos, mixins, extend ...
5. Javascript Ruby
6. ➔ Nomes mais semânticos vantagens ➔ Fácil manutenção ➔ Separa informações importantes ➔ Aumenta legibilidade do código ➔ Facilita padronização ➔ Menor base de código ➔ Reduz conflitos
7. $ npm install -g stylus $ gem install sass instalando
8. variáveis
9. $brand-orange: #ff7212; $title-color: $brand-orange; $brand-orange = #ff7212; $title-color = $brand-orange; brand-orange = #ff7212 title-color = brand-orange
10. módulos
12. @import “engine/settings” @import “engine/helpers” @import “partials/top” @import “partials/content” @import “partials/aside” @import “partials/bottom” @import “engine/settings” @import “engine/helpers” @import “partials/top” @import “partials/content” @import “partials/aside” @import “partials/bottom” @require “engine/settings” @require “engine/helpers” @require “partials/top” @require “partials/content” @require “partials/aside” @require “partials/bottom” index.scss index.styl index.css
13. mixins
14. transform($transform) { -ms-transform: $transform -webkit-transform: $transform -moz-transform: $transform transform: $transform } @mixin transform($transform) { -ms-transform: $transform; -webkit-transform: $transform; -moz-transform: $transform; transform: $transform; } .block { transform(scale(2)) } .block { @mixin transform(scale(2)); }
15. placeholder extend
16. $btn { font-size: 1.2em padding: .5em .75em border: 0 border-radius: 5px } %btn transform($transform) { font-size: 1.2em; padding: .5em .75em; border: 0; border-radius: 5px; } .submit { @extends $btn color: whitesmoke background-color: limegreen } .submit { @extend %btn; color: whitesmoke; background-color: limegreen; }
17. e isso é só o começo... ➔ function ➔ funções nativas ➔ condicionais (if, else, if else) ➔ listas ➔ for, each ➔ interpolação
18. $ stylus main.styl $ sass main.scss:main.css compilando
19. $ stylus main.styl --watch $ sass main.scss:main.css --watch watch
21. ➔ csslint.net ➔ grunt-contrib-csslint ➔ scss-lint ➔ grunt-scss-lint lint “it will hurt your feelings”
22. Grunt.js
23. ➔ combine Media Queries ➔ compiladores ➔ compactadores ➔ watch ➔ linters tasks úteis
24. learnboost.github.io/stylus sass-lang.com
25. http://goo.gl/jpiKNi
26. grazie! @AtilaFassina