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

Folhas de estilo sintaticamente impressionantes (Sass) é uma linguagem de extensão CSS popular. A linguagem existe há cerca de 15 anos. Funciona bem com todas as versões do CSS, tornando-o compatível com todas as bibliotecas e frameworks 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 estão atualmente fora do escopo do CSS.

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

Instalando o 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 o npm, você precisará instale o NodeJS e o npm no seu dispositivo. Então você precisa criar um pacote.json (que é uma boa prática ao instalar qualquer pacote npm em seus projetos). Você pode criar uma base pacote.json arquivo no diretório do seu projeto com o seguinte comando de terminal:

npm init -y

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

{
 "nome": "meu_aplicativo",
 "versão": "1.0.0",
 "Descrição": "",
 "main": "index.js",
 "roteiros": {
 "test": "echo \"Erro: nenhum teste especificado\" && exit 1"
 },
 "palavras-chave": [],
 "autor": "",
 "licença": "ISC"
}

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

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

npm instalar sass

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

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 .scss arquivo usa chaves e ponto e vírgula (muito parecido com CSS), enquanto o .sass estruturas de arquivo CSS usando recuo (muito parecido com Python). Alguns desenvolvedores preferem usar o .scss arquivo, pois sua estrutura está mais próxima do CSS.

Um exemplo de arquivo .scss

$cor primária: azul;
corpo {
 cor: $cor primária;
 p{
 cor vermelha;
 }
}

Um exemplo de arquivo .sass

$cor primária: azul
corpo
 cor: $cor primária
 p
 cor vermelha

Compilando um arquivo Sass para CSS

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

sass arquivo.scss > arquivo.css

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

sass scss: dist/css/

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

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

"roteiros": {
 "test": "echo \"Erro: nenhum teste especificado\" && exit 1",
 "sass": "sass --watch scss: dist/css/"
 },

Essa configuração usa o --Assistir opção. Ele mantém o sass em execução e garante que recompile esses arquivos sempre que eles forem alterados. Para cada arquivo, o sass irá gerar um .css e um .css.map Arquivo.

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

npm corre atrevida

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

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Compilado scss\main.scss para dist\css\main.css.
Sass está atento às mudanças. Pressione Ctrl-C para parar.

Variáveis ​​Sass

Você pode criar variáveis ​​em CSS hoje, mas há 15 anos as variáveis ​​CSS não existiam, então o suporte Sass para elas era valioso. As variáveis ​​Sass operam 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 o $cor primária exemplo acima. É importante notar que uma variável Sass não compila em variáveis ​​CSS. Por exemplo, este arquivo .scss:

$cor primária: azul;
corpo {
 cor: $cor primária;
}

Compilará para o seguinte CSS:

corpo {
 cor azul;
}

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 de seu projeto, então uma variável é ótima. Mas se você tiver um grupo de propriedades que deseja usar como uma unidade, um mixin fará o truque.

Cada mixin começa com o @mixin palavra-chave, seguida pelo 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($cor primária: branco, $cor secundária: #2c2c2c) {
 família de fontes: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 cor de fundo: $cor primária;
 cor: $cor-secundária;
}
#casa {
 @include tema claro (azul);
}

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

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

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

#casa {
 família de fontes: "Franklin Gothic Medium", "Arial Narrow", Arial, sem serifa;
 cor de fundo: azul;
 cor: #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-um, $num-two){
 $soma: 0;
 $soma: $num-um + $num-dois;
 @return $soma 
}

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. Módulos fornecem uma maneira de dividir arquivos grandes em menores que sass combina 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 é o @usar palavra-chave.

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

O arquivo mixins.scss

@mixin light-theme($cor primária: branco, $cor secundária: #2c2c2c) {
 família de fontes: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 cor de fundo: $cor primária;
 cor: $cor-secundária;
}

O arquivo main.scss

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

Para importar e usar um arquivo externo como módulo, você precisará usar o @usar palavra-chave para importá-lo. Então, 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. A compilação dos arquivos acima gerará o seguinte código CSS:

#casa {
 família de fontes: "Franklin Gothic Medium", "Arial Narrow", Arial, sem serifa;
 cor de fundo: branco;
 cor: #2c2c2c;
}

Use Sass para estender e organizar seu CSS

Sass é uma extensão da sintaxe do CSS. Ele permite agilizar suas folhas de estilo e gerenciá-las com mais eficiência. Mas você ainda precisará ter um 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 para você fazer é criar um documento HTML e ver seu código Sass ganhar vida.

8 dicas e truques essenciais de CSS que todo desenvolvedor deve saber

Leia a seguir

Sobre o autor