Otimização de tempo com SASS preprocessor

777 views
679 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
777
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
6
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Otimização de tempo com SASS preprocessor

  1. 1. Otimização de tempo com Sass sass-lang.com/
  2. 2. What is this? Service as a software?
  3. 3. What is this? Syntactically Awesome Stylesheets
  4. 4. What is this? Sass é uma meta-linguagem em cima do CSS que é usada para descrever o estilo de um documento de forma limpa e estruturalmente mais poderosa que o próprio CSS. Sass tanto fornece uma sintaxe mais simples, mais elegante como implementa vários recursos que são úteis para a criação de folhas de estilo gerenciáveis.
  5. 5. Features • Totalmente compatível com CSS3 • Extensões de linguagem, tais como variáveis e mixins • Muitas funções úteis para a manipulação de cores e outros valores • Produção bem formatada e customizável • integração com Firebug
  6. 6. Features $cor-vermelho: #f00; #main p{ color: lighten($cor-vermelho , 20%); width: 97%; .span{ background-color: darken(#ff0000 , 40%); color: #ff0; } }
  7. 7. Features #main p{ color: #ff6666; width: 97%; } #main p span{ background-color: #330000; color: #ff0; }
  8. 8. Install >
  9. 9. Install Primeiramente, o Ruby Não se preocupe! Você não precisa saber programar em Ruby. Ele servirá apenas para compilar o Sass ;)
  10. 10. Install C:>gem install sass
  11. 11. Usage >
  12. 12. Usage C:>sass --help
  13. 13. --help
  14. 14. Usage C:>sass [options][input]:[output][complementary]
  15. 15. Usage C:>sass --watch ***.scss:***.css *** você pode especificar um arquivo ou pasta
  16. 16. Usage C:>sass --watch scss:css --style *** *** nested, compact, compressed, expanded
  17. 17. Obrigado! @paullonorato

×