Otimização de tempo com Sass
sass-lang.com/
What is this?

Service as a software?
What is this?

Syntactically Awesome
Stylesheets
What is this?

Sass é uma meta-linguagem em cima do CSS que é usada para
descrever o estilo de um documento de forma limpa...
Features
• Totalmente compatível com CSS3
• Extensões de linguagem, tais como variáveis e
mixins
• Muitas funções úteis pa...
Features
$cor-vermelho: #f00;
#main p{
color: lighten($cor-vermelho , 20%);
width: 97%;

.span{
background-color: darken(#...
Features
#main p{
color: #ff6666;
width: 97%;
}

#main p span{
background-color: #330000;
color: #ff0;
}
Install >
Install
Primeiramente, o Ruby

Não se preocupe! Você não precisa saber
programar
em Ruby. Ele servirá apenas para compilar...
Install

C:>gem install sass
Usage >
Usage

C:>sass --help
--help
Usage

C:>sass [options][input]:[output][complementary]
Usage

C:>sass --watch ***.scss:***.css
*** você pode especificar um arquivo ou pasta
Usage

C:>sass --watch scss:css --style ***
*** nested, compact, compressed, expanded
Obrigado!
@paullonorato
Otimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessor
Próximos SlideShares
Carregando em…5
×

Otimização de tempo com SASS preprocessor

925 visualizações

Publicada em

Publicada em: Tecnologia
1 comentário
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
925
No SlideShare
0
A partir de incorporações
0
Número de incorporações
19
Ações
Compartilhamentos
0
Downloads
6
Comentários
1
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×