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:

 

Acessar a mesma pelo terminal, Ex:

cd ~/theme-sass/assets

 

Vamos criar uma pasta aonde vamos dar inicio ao nosso estilo:

mkdir sass

 

Depois da pasta criada, vamos abrir a pelo terminal:

cd sass/

 

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

 

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.

 

Depois ter instalado em sua pasta, vamos criar um novo documento chamado: “style.scss”

echo '' -> style.scss

 

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

 

Para que fique automática a parte de atualização do arquivo “style.css” vamos executar esse comando:

sass --watch style.scss:style.css

 

Se o .CSS estiver em uma pasta diferente do que .SCSS, execute o código abaixo:

sass --watch style.scss:./../css/style.css

 

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.

César Ribeiro
Written by

My name’s Cesar H. Ribeiro I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, actually I’m Web Developer Freelancer, my specialty is deploying CMS using the WordPress platform, transforming layouts for custom themes for WordPress. I worked with many agencies around the world like: Brazil, Australia, USA and Austria.

Related Posts