O SASS é uns dos métodos mais utilizados hoje em dia nas agências e desenvolvedores. Porque podemos trabalhar com @functions, @mixis, @variables, etc… e também com o metódo de exportação nós podemos utilizar a função de “compress” que otimiza a velocidade de carregamento do web site.
Se você ainda não o conhece SASS, eu conselho dar uma olhada na documentação oficial do mesmo.
Nesse exemplo de hoje, nós vamos precisar utilizar o Terminal, que é padrão em sistemas operacionais como Linux e Mac… Já com o Windows vocês vão precisar utilizar um aplicativo da sua escolha.
Eu passei por uma dificuldade inicialmente, porque que o meu editor de HTML “Sublime” que eu utilizo não lê corretamente a extensão .SCSS, então por causa disso não aplicava a “formatação” correta como é aplicada no HTML, CSS, jQuery, etc… então eu precisei seguir esses passos para corregir esse “bug”.
Passos de Instalação do SASS:
1º Acessar a mesma pelo terminal, Ex:
cd ~/theme-sass/assets
2º Vamos criar uma pasta aonde vamos dar inicio ao nosso estilo:
mkdir sass
3º Depois da pasta criada, vamos abrir a pelo terminal:
cd sass/
4º Agora vamos criar um documento em branco, chamado “style.css” via Terminal… Mas se você desejar criar “manualmente” não tem problema algum, o resultado será o mesmo.
echo '' -> style.css
5º Com todos esses passos já realizado, vamos dar inicio a nossa instalação dentro da mesma pasta que criamos anteriormente, executando esse comando logo abaixo:
gem install sass
5.1º Se causar algum erro de permissão é só seguir o que ele fala na tela e dar as permissões necessárias.
6º Depois ter instalado em sua pasta, vamos criar um novo documento chamado: “style.scss”
echo '' -> style.scss
7º Agora vamos criar uma vinculação entre style.scss e o style.css, execute o comando para gerar o estilo do site já codificado apartir do .SCSS:
sass style.scss:style.css
Com esses passos já estará tudo funcionando, mas esse metódo é “manual” e toda vez que vocês fizerem uma alteração no .SCSS vocês teram que executar essa comando toda vez.
Mas logo abaixo vou ensinar também deixar essa comando automático utilizando o processo –watch
Passos de como utilizar o –watch e compressed
1º Para que fique automática a parte de atualização do arquivo “style.css” vamos executar esse comando:
sass --watch style.scss:style.css
2º Se o .CSS estiver em uma pasta diferente do que .SCSS, execute o código abaixo:
sass --watch style.scss:./../css/style.css
3º Esse é o metódo que eu mais indico para todos vocês, vamos aplicar o metódo –watch + compressed “comprimir”, com esse comando ele já gera o seu estilo automáticamente e já minificado:
sass --watch style.scss:./../css/style.css --style compressed
Espero que vocês tenham gostado desse tutorial e até breve ?
Por favor, se você gostou deixe seu like e também se possível compartilhe.
