O SASS é um pré-compilador para agilizar na construção de css. Já que css não tem recursos avançados para se construir de uma forma mais profissional. Então, o SASS supri a necessidade de desenvolver funções, variáveis e no final teremos um css após a compilação. Atualmente vários frameworks CSS usam SASS para construir seu CSS, por exemplo, o bootstrap 4.
Os arquivos SASS estão na extensão .sass ou .scss. Os dois tipos de extensão que vai modificar é a formatação do arquivo. No .sass é necessário usar a indentação, já o .scss é necessário utilizar os parenteses para marcar instruções de programa.
Comando de conversão:
De .sass para .scss
$ sass-convert main.sass main2.scss
De .scss para .sass
$ sass-convert principal.scss principal2.sass
Comandos para assistir um arquivo ou pasta. Assistir é você visualizar as alterações e fazer a compilação dele para um arquivo.css.
Para assistir pastas e realizar todo o monitoramento dos arquivos com extensão .sass ou .scss:
$ sass – -watch scss:css
$ sass – -watch scss:css –style compressed
$ sass – -watch scss:css –style nested
$ sass – -watch scss:css –style expanded
$ sass – -watch scss:css –style compact
Para assistir ou monitorar arquivos único arquivo sass.
$ sass – -watch scss/main.scss:style.css –style compressed
$ sass – -watch scss/main.scss:style.css –style nested
$ sass – -watch scss/main.scss:style.css –style expanded
$ sass – -watch scss/main.scss:style.css –style compacted
$ sass – -watch scss/main.scss:style.css
Nota-se que é necessário ficar monitorando mudanças na pasta dos arquivos SASS para ficar convertendo em tempo real em css. Também é fundamental deixar claro que este arquivos devem ficar apenas na máquina de desenvolvimento. Nunca envie sass para modo de produção.