Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SASS para iniciantes.

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.

Thulio Philipe

August 22, 2015
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

Transcript

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

  3. i'm from Recife!

  4. None
  5. O que é?

  6. None
  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
  11. None
  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%; }
  24. None
  25. show me the code!

  26. Muito obrigado @thulioph_

  27. None