Guia Rápido para Instalar e Usar SASS em Seus Projetos
- #Boas práticas
- #CSS
- #SASS
O que é SASS?
O SASS (Syntactically Awesome Stylesheets) é uma linguagem de extensão do CSS que adiciona funcionalidades poderosas e elegantes ao estilo padrão da stylesheet. Ele facilita a escrita e a manutenção do código CSS, permitindo o uso de variáveis, aninhamento, mixins, entre outras características.
Instalação do SASS
1. Node.js e NPM: Antes de instalar o SASS, certifique-se de ter o Node.js e o NPM (Node Package Manager) instalados. Você pode baixá-los em [https://nodejs.org](https://nodejs.org).
2. Instalação Global: Abra o terminal e execute o seguinte comando para instalar o SASS globalmente:
npm install -g sass
3. Verificação da Instalação: Após a instalação, verifique se o SASS foi instalado corretamente:
sass --version
Estrutura do Projeto
Ao usar o SASS, você pode estruturar seu projeto da maneira que preferir. No entanto, aqui está uma estrutura básica para começar:
projeto/
|-- src/
| |-- estilos/
| |-- estilo.scss
|-- dist/
| |-- estilo.css
- src/estilos/estilo.scss: Este é o arquivo principal onde você escreverá seu código SASS.
- dist/estilo.css: Este é o arquivo CSS compilado gerado pelo SASS.
Utilizando SASS
1. Compilação Única: Para compilar seu código SASS em CSS, use o seguinte comando no terminal:
sass src/estilos/estilo.scss dist/estilo.css
Isso compilará o arquivo `estilo.scss` e criará um novo arquivo `estilo.css` na pasta `dist`.
2. Assistindo Mudanças: Se deseja que o SASS assista por mudanças e recompile automaticamente, use:
sass --watch src/estilos/estilo.scss dist/estilo.css
Agora, qualquer alteração em `estilo.scss` será automaticamente refletida em `estilo.css`.
Integrando ao Projeto
Depois de compilar o código SASS para CSS, você pode vincular o arquivo CSS gerado ao seu projeto HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/estilo.css">
<title>Meu Projeto</title>
</head>
<body>
<!-- Seu conteúdo aqui -->
</body>
</html>
Agora você está pronto para aproveitar os benefícios do SASS em seu projeto! Explore as capacidades avançadas, como variáveis, aninhamento e mixins, para tornar seu código CSS mais eficiente e legível.
