Advertisement
  1. Web Design
  2. Sass

Acompanhe e Compile Sass em Cinco Passos Rápidos

Scroll to top
Read Time: 2 min

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Talvez Sass seja o pré-processador mais popular. Por anos, ajudou-nos a escrever CSS modular, reutilizável e limpo. Nesse tutorial rápido, iremos direto ao que interessa e explicaremos como compilar Sass em CSS usando a linha de comando.

1. Instalar Node.js

Para compilar o Sass via linha de comando, primeiro precisamos instalar o Node.js. Baixemos do site oficial, nodejs.org, abramos o pacote e sigamos o passo-a-passo.

2. Iniciar NPM

NPM é o administrador de pacotes do JavaScript. NPM facilita a instalação e remoção de pacotes de terceiros. Para iniciar um projeto Sass com NPM, abramos o terminal e naveguemos até a pasta do projeto.

Navigating to SASS-tutorial folderNavigating to SASS-tutorial folderNavigating to SASS-tutorial folder
Navegando até o diretório do projeto Sass

Estando na pasta certa, execute npm init. Teremos de responder algumas perguntas sobre o projeto as quais o NPM usará para criar o package.json na pasta.

packagejsonpackagejsonpackagejson

3. Instalar Node-Sass

Node-sass é um pacote do NPM que compila Sass em CSS (bem rápido). Para instalá-lo, executemos o comando a seguir no terminal: npm install node-sass.

4. Criar o Comando Node-Sass

Tudo está pronto para escrevermos um pequeno script para compilarmos com Sass. Abramos o package.json em um editor de código. Veremos algo assim:

Na seção scripts, adicionemos o comando scss, abaixo do comando test, assim:

Vejamos, palavra por palavra.

  1. node-sass: refere-se ao pacote node-sass.
  2. -watch: semáforo opicional que significa "acompanhe todos arquivos .scss na pasta scss/ e recompile-os sempre que algo mudar".
  3. scss: noma da pasta onde ficam todos arquivos .scss.
  4. -o css: a pasta de destino do CSS compilado.

Ao executarmos o script, ele acompanhará cada arquivo .scss na pasta scss/ e salvará o css compilado na pasta css/ sempre que algum arquivo .scss mudar.

5. Executar o Script

Para executar nosso script, executaremos o comando npm run scss no terminal.

E voilà! Estamos acompanhando e compilando SASS.

Dicas Rápidas de Sass

Fique ligado para mais dicas de Sass. Há uma coleção inteira a caminho!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.