Converter Sass para Css
13/06/2018
0
Estou desenvolvendo um site pessoal, e estou fazendo ele sem nada de backend, pois é somente um site institucional..
Nos arquivos do meu site tenho um arquivo: site.scss
Que no caso, faço todo o css do meu site com sass, porém pra converter o scss para css eu tenho outro arquivo: site.css.
Sempre que faço alguma alteração vou em um site de conversão online, onde copio todo conteúdo de site.scss, após convertido eu colo tudo em meu site.css.
Desta forma fica muito trabalhoso, podem me dizer algum conversor que eu possa usar pela linha de comando por exemplo.
Nos arquivos do meu site tenho um arquivo: site.scss
Que no caso, faço todo o css do meu site com sass, porém pra converter o scss para css eu tenho outro arquivo: site.css.
Sempre que faço alguma alteração vou em um site de conversão online, onde copio todo conteúdo de site.scss, após convertido eu colo tudo em meu site.css.
Desta forma fica muito trabalhoso, podem me dizer algum conversor que eu possa usar pela linha de comando por exemplo.
Gabriel Queiroz
Curtir tópico
+ 0
Responder
Post mais votado
13/06/2018
Fala meu querido tudo bem?
Acredito que a grande maioria de editores de texto/IDE voltadas para programação, pelo menos as mais recentes, tem Plugins que fazem isso!
Exemplo o Atom, tem um plugin que ao escrever em sass, e depois salvar ele já converte em css!
Link: https://atom.io/packages/atom-sass
Acredito que a grande maioria de editores de texto/IDE voltadas para programação, pelo menos as mais recentes, tem Plugins que fazem isso!
Exemplo o Atom, tem um plugin que ao escrever em sass, e depois salvar ele já converte em css!
Link: https://atom.io/packages/atom-sass
Vinicius Oliveira
Responder
Mais Posts
29/06/2018
Marcus Crisostomo
A melhor forma de você conseguir o que precisa seria instalando o pacote do SASS no seu computador usando o NPM.
Para isso vá em https://nodejs.org/ e baixe a última versão do Node para a sua máquina.
Após a instalação, abra o Prompt de Comando (Windows) ou o Terminal (MacOs ou Linux) e digite npm -v ou node -v
Estes comandos vão retornar a versão Node e do NPM instalados em sua máquina confirmando que o Node foi instalado com sucesso.
Feito isso, ainda no Prompt de Comando ou Terminal, digite npm install -g sass. Este comando irá instalar o SASS de forma global em sua máquina permitindo que em qualquer projeto ele possa ser utilizado caso seja necessário.
Após a instalação do SASS digite o comando sass --version. Este comando vai retornar a versão do SASS instalada na sua máquina confirmando a instalação com sucesso do pacote.
Ok, vc já instalou o Node e o SASS. Mas como vai fazer para pré-processar o SASS?
Simples, no Prompt de Comando (ou Terminal) digite o comando sass --watch <diretório>/site.scss <diretório>/index.css. Substitua o <diretório> pelo caminho onde você definiu onde ficará o seu arquivo SASS e o seu arquivo CSS.
Pronto! Seguindo estes passos, você não precisará usar um conversor e sempre que o arquivo site.scss for alterado, o SASS fará o pré-processamento e você terá o seu arquivo site.css atualizado automaticamente podendo ver as alterações logo após recarregar a sua tela.
Espero ter ajudado.
Para isso vá em https://nodejs.org/ e baixe a última versão do Node para a sua máquina.
Após a instalação, abra o Prompt de Comando (Windows) ou o Terminal (MacOs ou Linux) e digite npm -v ou node -v
Estes comandos vão retornar a versão Node e do NPM instalados em sua máquina confirmando que o Node foi instalado com sucesso.
Feito isso, ainda no Prompt de Comando ou Terminal, digite npm install -g sass. Este comando irá instalar o SASS de forma global em sua máquina permitindo que em qualquer projeto ele possa ser utilizado caso seja necessário.
Após a instalação do SASS digite o comando sass --version. Este comando vai retornar a versão do SASS instalada na sua máquina confirmando a instalação com sucesso do pacote.
Ok, vc já instalou o Node e o SASS. Mas como vai fazer para pré-processar o SASS?
Simples, no Prompt de Comando (ou Terminal) digite o comando sass --watch <diretório>/site.scss <diretório>/index.css. Substitua o <diretório> pelo caminho onde você definiu onde ficará o seu arquivo SASS e o seu arquivo CSS.
Pronto! Seguindo estes passos, você não precisará usar um conversor e sempre que o arquivo site.scss for alterado, o SASS fará o pré-processamento e você terá o seu arquivo site.css atualizado automaticamente podendo ver as alterações logo após recarregar a sua tela.
Espero ter ajudado.
Responder
29/06/2018
Marcus Crisostomo
Esqueci de comentar isso no meu texto anterior. Para maiores dúvidas, acesse o site do projeto SASS: http://sass-lang.com
Abraços.
Abraços.
Responder
Clique aqui para fazer login e interagir na Comunidade :)
