Download - Otimização de tempo com SASS preprocessor
![Page 1: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/1.jpg)
Otimização de tempo com Sass
sass-lang.com/
![Page 2: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/2.jpg)
Service as a software?
What is this?
![Page 3: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/3.jpg)
Syntactically AwesomeStylesheets
What is this?
![Page 4: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/4.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/5.jpg)
• 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](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/6.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/7.jpg)
Features
#main p{
color: #ff6666;
width: 97%;
}
#main p span{
background-color: #330000;
color: #ff0;
}
![Page 8: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/8.jpg)
Install >
![Page 9: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/9.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/10.jpg)
Install
C:\>gem install sass
![Page 11: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/11.jpg)
Usage >
![Page 12: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/12.jpg)
Usage
C:\>sass --help
![Page 13: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/13.jpg)
--help
![Page 14: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/14.jpg)
Usage
C:\>sass [options][input]:[output][complementary]
![Page 15: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/15.jpg)
Usage
*** você pode especificar um arquivo ou pasta
C:\>sass --watch ***.scss:***.css
![Page 16: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/16.jpg)
Usage
*** nested, compact, compressed, expanded
C:\>sass --watch scss:css --style ***
![Page 17: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/17.jpg)
![Page 18: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/18.jpg)
![Page 19: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/19.jpg)
![Page 20: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/20.jpg)
![Page 21: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/21.jpg)
![Page 22: Otimização de tempo com SASS preprocessor](https://reader033.vdocument.in/reader033/viewer/2022060121/559469f61a28ab9e2b8b4592/html5/thumbnails/22.jpg)
Obrigado!
@paullonorato