O que é Sass? Aprenda como usar esta linguagem de extensão CSS

Se você está lutando com arquivos CSS complicados e confusos, não procure além do Sass e sua magia de processamento.

Folhas de estilo sintaticamente incríveis (Sass) é uma linguagem de extensão CSS popular. A linguagem existe há cerca de 15 anos. Funciona bem com todas as versões de CSS, tornando-o compatível com todas as bibliotecas e estruturas CSS, do Bootstrap ao Foundation.

A linguagem permite que você escreva código Sass e depois compile esse código em CSS. O valor de usar Sass em vez de CSS simples é que ele fornece recursos adicionais que atualmente estão fora do escopo do CSS.

Neste tutorial, você aprenderá como usar o Sass e seus recursos mais importantes.

Instalando Sass

Existem várias maneiras de usar o Sass no seu dispositivo. Isso inclui executar um aplicativo (como LiveReload ou Scout-App), baixar Sass do GitHub ou instalá-lo usando npm.

Instalando Sass com npm

Para instalar o Sass usando npm você precisará instalar o NodeJS e o npm no seu dispositivo. Então você precisará criar um arquivo package.json (que é uma boa prática ao instalar qualquer pacote npm em seus projetos). Você pode criar um arquivo package.json básico no diretório do seu projeto com o seguinte comando de terminal:

npm init -y

A execução deste comando irá gerar um arquivo package.json com o seguinte conteúdo:

{
 "name": "my_app",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

O arquivo package.json é importante porque serve como configuração do seu projeto. Cada vez que você instala um novo pacote npm, o arquivo package.json refletirá isso.

Agora você pode instalar o Sass inserindo o seguinte comando em seu terminal:

npm install sass

Este comando atualizará o arquivo package.json criando um novo campo de dependência, que conterá o novo pacote Sass. Ele também irá gerar um novo arquivo package-lock.json e instalar o sass (mais dependências) em um diretório node_modules .

Os diferentes tipos de arquivo Sass

Um arquivo Sass pode ter uma de duas extensões, .sass ou .scss. A principal diferença entre eles é que o arquivo .sss usa chaves e ponto e vírgula (muito parecido com CSS), enquanto o arquivo .sass estrutura CSS usando indentação (muito parecido com Python). . Alguns desenvolvedores preferem usar o arquivo .scss porque sua estrutura é mais próxima do CSS.

Um exemplo de arquivo .scss

$primary-color: blue;
body {
    color: $primary-color;
   p {
       color: red;
   }
}

Um exemplo de arquivo .sass

$primary-color: blue
body
    color: $primary-color
   p
       color: red

Compilando um arquivo Sass para CSS

Você pode compilar um arquivo Sass individual usando o programa de linha de comando sass:

sass file.scss > file.css

Você também pode executar o sass em todos os arquivos de um diretório específico:

sass scss:dist/css/

Esse comando compila todos os arquivos Sass dentro do diretório scss e armazena os arquivos resultantes em dist/css.

Se estiver usando npm, você pode configurar um atalho conveniente para compilação sass usando o campo scripts em seu arquivo package.json:

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "sass": "sass --watch scss:dist/css/"
 },

Esta configuração usa a opção --watch. Ele mantém o sass funcionando e garante a recompilação desses arquivos sempre que eles são alterados. Para cada arquivo, o sass irá gerar um arquivo .css e um arquivo .css.map.

Para executar o script Sass acima você precisará executar o seguinte comando em seu terminal:

npm run sass

A execução desse comando gerará uma saída semelhante a esta:

> my_app@1.0.0 sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss:dist/css/
Compiled scss\main.scss to dist\css\main.css.
Sass is watching for changes. Press Ctrl-C to stop.

Variáveis Sass

Você pode criar variáveis em CSS hoje, mas há 15 anos não existiam variáveis CSS, então o suporte do Sass para elas era valioso. As variáveis Sass funcionam da mesma maneira que as variáveis CSS. Eles armazenam valores (como cores) que você pretende usar em um arquivo CSS. Um dos principais benefícios das variáveis é que elas permitem atualizar muitas ocorrências de um valor, alterando-o em apenas um lugar.

Cada variável Sass começa com o cifrão, seguido por qualquer combinação de caracteres. Tente tornar suas variáveis descritivas, como no exemplo $primary-color acima. É importante observar que uma variável Sass não é compilada em variáveis CSS. Por exemplo, este arquivo .scss:

$primary-color: blue;

body {
   color: $primary-color;
}

Compilará para o seguinte CSS:

body {
    color: blue;
}

Como você pode ver no arquivo acima, não há variáveis CSS. A vantagem das variáveis é que qualquer alteração feita no arquivo Sass atualizará o arquivo CSS correspondente.

Mixins Sass

Se você tem uma propriedade que deseja usar várias vezes ao longo do projeto, então uma variável é ótima. Mas se você tiver um grupo de propriedades que deseja usar como uma unidade, um mixin resolverá o problema.

Cada mixin começa com a palavra-chave @mixin , seguida do nome que você deseja atribuir ao mixin. Você tem a opção de passar variáveis para o mixin como parâmetros e usar essas variáveis dentro do corpo do mixin, da mesma forma que uma função.

Usando um mixin

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   background-color: $primary-color;
   color: $secondary-color;
}

#home {
   @include light-theme(blue);
}

A primeira coisa que você notará no código acima é que o mixin aceita dois argumentos. Você pode atribuir valores padrão aos argumentos e substituí-los ao incluí-los.

Depois de criar seu mixin, você pode usá-lo em qualquer seção do seu site usando a palavra-chave @include seguida do nome do mixin.

A compilação do código Sass acima irá gerar o seguinte código CSS em seu arquivo de destino:

#home {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 background-color: blue;
 color: #2c2c2c;
}

Funções Sass

Além das diferentes palavras-chave, a principal diferença entre uma função e um mixin é que uma função deve retornar algo. Você pode usar funções Sass para calcular valores ou realizar operações.

@function add-numbers($num-one, $num-two){
   $sum: 0;
   $sum: $num-one + $num-two;
   @return $sum 
}

Esta função acima aceita dois números e retorna sua soma. As funções Sass podem até conter instruções if, loops for e outras instruções de fluxo de controle.

Módulos Sass

Se você tivesse que incluir todas as suas variáveis, mixins e funções no mesmo arquivo, você teria um arquivo Sass enorme ao criar aplicativos grandes. Os módulos fornecem uma maneira de dividir arquivos grandes em arquivos menores que são combinados durante a compilação. Por exemplo, você pode ter um módulo de função e um módulo mixin, tudo que você precisa lembrar é a palavra-chave @use.

Aqui está um exemplo que mostra como você pode separar o mixin anterior em seu próprio arquivo:

O arquivo mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   background-color: $primary-color;
   color: $secondary-color;
}

O arquivo main.scss

@use 'mixins';
#home{
   @include mixins.light-theme;
}

Para importar e usar um arquivo externo como módulo, você precisará usar a palavra-chave @use para importá-lo. Em seguida, para usar um mixin específico do arquivo importado, prefixe o nome do mixin específico com o nome do arquivo seguido por um ponto final. A compilação dos arquivos acima irá gerar o seguinte código CSS:

#home {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 background-color: white;
 color: #2c2c2c;
}

Use Sass para estender e organizar seu CSS

Sass é uma extensão da sintaxe do CSS. Ele permite que você simplifique suas folhas de estilo e gerencie-as com mais eficiência. Mas você ainda precisará ter domínio de CSS e princípios de web design para criar designs eficazes.

Este artigo ensina como instalar e usar o Sass. Você aprendeu como criar variáveis, mixins, funções e módulos Sass. Agora tudo o que resta a você fazer é criar um documento HTML e ver seu código Sass ganhar vida.