Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Otimização de tempo com SASS preprocessor

987 vues

Publié le

Publié dans : Technologie

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

×