Otimização de tempo com SASS preprocessor
-
Upload
paullo-norato -
Category
Technology
-
view
475 -
download
1
Transcript of 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