Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass

Acompanhe e Compile Sass em Cinco Passos Rápidos

by
Difficulty:IntermediateLength:ShortLanguages:

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

Final 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 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.

packagejson

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
Advertisement
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.