Otimização de tempo com SASS preprocessor

22
Otimização de tempo com Sass sass-lang.com/

Transcript of Otimização de tempo com SASS preprocessor

Page 1: Otimização de tempo com SASS preprocessor

Otimização de tempo com Sass

sass-lang.com/

Page 2: Otimização de tempo com SASS preprocessor

Service as a software?

What is this?

Page 3: Otimização de tempo com SASS preprocessor

Syntactically AwesomeStylesheets

What is this?

Page 4: Otimização de tempo com SASS preprocessor

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.

What is this?

Page 5: Otimização de tempo com SASS preprocessor

• 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

Features

Page 6: Otimização de tempo com SASS preprocessor

Features

$cor-vermelho: #f00;

#main p{

color: lighten($cor-vermelho , 20%);

width: 97%;

.span{

background-color: darken(#ff0000 , 40%);

color: #ff0;

}

}

Page 7: Otimização de tempo com SASS preprocessor

Features

#main p{

color: #ff6666;

width: 97%;

}

#main p span{

background-color: #330000;

color: #ff0;

}

Page 8: Otimização de tempo com SASS preprocessor

Install >

Page 9: Otimização de tempo com SASS preprocessor

Install

Primeiramente, o Ruby

Não se preocupe! Você não precisa saber programar

em Ruby. Ele servirá apenas para compilar o Sass ;)

Page 10: Otimização de tempo com SASS preprocessor

Install

C:\>gem install sass

Page 11: Otimização de tempo com SASS preprocessor

Usage >

Page 12: Otimização de tempo com SASS preprocessor

Usage

C:\>sass --help

Page 13: Otimização de tempo com SASS preprocessor

--help

Page 14: Otimização de tempo com SASS preprocessor

Usage

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

Page 15: Otimização de tempo com SASS preprocessor

Usage

*** você pode especificar um arquivo ou pasta

C:\>sass --watch ***.scss:***.css

Page 16: Otimização de tempo com SASS preprocessor

Usage

*** nested, compact, compressed, expanded

C:\>sass --watch scss:css --style ***

Page 17: Otimização de tempo com SASS preprocessor
Page 18: Otimização de tempo com SASS preprocessor
Page 19: Otimização de tempo com SASS preprocessor
Page 20: Otimização de tempo com SASS preprocessor
Page 21: Otimização de tempo com SASS preprocessor
Page 22: Otimização de tempo com SASS preprocessor

Obrigado!

@paullonorato