SASS para iniciantes.

Evento: Job Conecta - Caruaru

Esta palestra engloba os principais conceitos para você iniciar no SASS. Mostrando as diferentes formas para instalar e compilar, passando de forma resumida por: variáveis, nesting, partial, import, mixins, extend e operadores.

Transcript

2. OLÁ Thulio Philipe github.com/thulioph twitter.com/thulioph_ thulioph.com speakerdeck.com/thulioph
3. i'm from Recife!
5. O que é?
7. Como instalar? O que é?
8. Applications command line
9. z Applications usaremos este
10. command line Linux sudo su -c "gem install sass" Windows Ruby Installer Mac sudo gem install sass
12. variables
13. variables Pense em variáveis como uma maneira de armazenar informações que você deseja reutilizar. $ff-primary: "Helvetica, sans-serif"; $color-primary: #000000; h1 { font-family: $ff-primary; color: $color-primary; } header { background-color: $color-primary; } h1 { font-family: "Helvetica, sans-serif"; color: #000000; } header { background-color: #000000; } scss css
14. variables nesting
15. nesting Esta é uma ótima maneira de organizar o seu CSS e torná-lo mais legível nav { li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; &:hover { text-decoration: underline; } } } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } nav a:hover { text-decoration underline; } scss css
16. variables nesting partials and import
17. partials and import O partial l é simplesmente um arquivo Sass nomeado com um underline. _reset.scss _base.scss @import 'reset'; @import 'base'; /*reset*/ html, body, ul, ol { margin: 0; padding: 0; } /*base*/ header { background-color: #000000; font-family: "Helvetica, sans-serif"; } scss css /*partials*/ /*import in main file*/ O import é usado igual ao CSS porém sem exigir uma requisição HTTP
18. variables nesting partials and import mixins
19. mixins Um mixin permite fazer grupos de declarações CSS que você deseja reutilizar @mixin bdr($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box { @include bdr(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } scss css
20. variables nesting partials and import mixins extend
21. extend O uso do @extend permite compartilhar um conjunto de propriedades CSS de um seletor para outro .message { border-bottom: 1px solid #ccc; padding: 10px; } .success { @extend .message; color: green; } .error { @extend .message; color: red; } .message, .success, .error, .warning { border-bottom: 1px solid #cccccc; padding: 10px; } .success { color: green; } .error { color: red; } scss css
22. variables nesting partials and import mixins extend operators
23. operators Efetuar operações matemáticas em CSS é muito útil. scss css $fixed-width: 960px; .main { float: left; width: (600px / $fixed-width) * 100%; } .complementary { float: right; width: (300px / $fixed-width) * 100%; } .main { float: left; width: 62.5%; } .complimentary { float: right; width: 31.25%; }
25. show me the code!
26. Muito obrigado @thulioph_