SantosDiv / sassStudy

Repositório destinado ao estudo e esclarecimentos do Sass.

Sass - Let's Go! 🏃

Preparando o ambiente

Ambiente Linux

Instalando o Dart-Sass ⚡

Note: Não foi utilizado o Ruby, por está descontinuado, segundo o Próprio site. Por isso utilizamos o Dart-Sass.

1. Acesse o Repositório Dart-Sass no github;
2. Baixe o arquivo que esteja de acordo com o seu computador (Na aba Assets);
3. No terminal acesse o arquivo .bashrc, usando o seguinte comando:

  `~/getit .bashrc`

4. Com o .bashrc aberto, na última linha digite o seguinte comando: export PATH="your-dir:$PATH", onde o your-dir é o diretório da pasta que você salvou o arquivo dart-sass que você baixou.

  #Exemplo
  `export PATH="~/Documentos/dart-sass:$PATH"`
  
  **Depois Salve o arquivo e feche-o. Reinicie também o terminal**

5. Por fim verifique se tudo foi instalado com exito. Execute o comando sass --version no terminal. Se aparecer a versão, deu tudo certo :)

Caso queira instalar no Windows ou no Mac, acesse o Path de instalação, com todas as intruções.

Instalando com o Node.js (via npm)

É uma opção também instalar via npm, se você usa o node.js.

  #Execute o comando
  `npm install -g sass`

Utilizando o Sass

• Compilando o arquivo Sass: sass arquivo.scss:arquivo.css. Será transformado no arquivo css;
• Dando um 'Watch' (Assistindo as alterações automaticamente): sass --watch arquivo.scss:arquivo.css. Assim não precisa compilar toda alteração.

Note: Os comandos de utilização do Sass precisam ser dado dentro da pasta onde está o arquivo css.

Mixin e Variáveis

o que é mixin, placeholders e como declarar variáveis no SASS.

Aninhamento

a explicação e uso do Aninhamento (Nexting)

Funções e Imports

a explicação e alguns exemplos de uso de funções e imports no SASS.

Media Queries

a explicação e alguns exemplos de uso de funções e imports no SASS.