No content

OLÁ Thulio Philipe github.com/thulioph twitter.com/thulioph_ thulioph.com speakerdeck.com/thulioph 

i'm from Recife! 

No content

O que é? 

No content

Como instalar? O que é? 

Applications command line 

z Applications usaremos este 

command line Linux sudo su -c "gem install sass" Windows Ruby Installer Mac sudo gem install sass 

No content

variables 

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 

variables nesting 

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 

variables nesting partials and import 

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 

variables nesting partials and import mixins 

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 

variables nesting partials and import mixins extend 

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 

variables nesting partials and import mixins extend operators 

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%; } 

No content

show me the code! 

Muito obrigado @thulioph_ 

No content