otimização de tempo com sass preprocessor

Otimização de tempo com Sass

sass-lang.com/

Service as a software?

What is this?

Syntactically AwesomeStylesheets

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.

What is this?

• 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

Features

$cor-vermelho: #f00;

#main p{

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

width: 97%;

.span{

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

color: #ff0;

}

}

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 o Sass ;)

Install

C:\>gem install sass

Usage >

Usage

C:\>sass --help

--help

Usage

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

Usage

*** você pode especificar um arquivo ou pasta

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

Usage

*** nested, compact, compressed, expanded

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

Obrigado!

@paullonorato