Como usar o SASS no Symfony?

1. O que é SASS?

O SASS (Syntactically Awesome Style Sheets) é uma extensão CSS que permite escrever estilos de forma mais ordenada, flexível e eficiente. Com ele, é possível utilizar variáveis, funções, mixins, seletores aninhados, entre outras funcionalidades que ajudam a simplificar e acelerar o trabalho de estilização. O SASS é compilado para CSS, o que significa que é possível utilizá-lo em qualquer ambiente que suporte CSS.

2. Como instalar o SASS?

Antes de começar a utilizar o SASS no Symfony, é preciso ter o SASS instalado na sua máquina. Para instalar o SASS, basta digitar o seguinte comando no terminal:

sudo gem install sass

Assim que a instalação for concluída, é possível verificar a versão do SASS instalada utilizando o comando:

sass -v

3. O que é o Webpack Encore?

O Webpack Encore é uma ferramenta que facilita o uso do Webpack no Symfony. Com ele, é possível configurar o Webpack para compilar arquivos CSS, JS e outras assets e gerar build para produção. O Webpack Encore também oferece uma série de facilidades para trabalhar com o SASS, como a integração com o Autoprefixer e outras funcionalidades que ajudam a otimizar a performance da aplicação.

4. Como instalar o Webpack Encore?

Para instalar o Webpack Encore, é necessário ter o Composer instalado na sua máquina. Em seguida, é necessário criar um novo projeto Symfony ou utilizar um projeto existente. Depois disso, basta executar o seguinte comando no terminal:

composer require symfony/webpack-encore-bundle

Assim que o pacote for instalado, é possível utilizar o comando:

yarn encore

para executar o Webpack Encore e compilar os assets da aplicação.

5. Como configurar o SASS no Webpack Encore?

Para utilizar o SASS com o Webpack Encore, é necessário ter o pacote sass-loader instalado na sua máquina. Em seguida, basta adicionar a seguinte linha de código no arquivo webpack.config.js:

Encore.enableSassLoader();

Com essa linha de código, o Webpack Encore está configurado para ler arquivos .scss ou .sass e compilar para CSS.

6. Como utilizar variáveis no SASS?

Uma das funcionalidades mais úteis do SASS é a possibilidade de utilizar variáveis para armazenar valores que serão utilizados em diversas partes do CSS. Para criar uma variável no SASS, basta adicionar o símbolo $ antes do nome da variável:

$cor-primaria: #FF0000;

Com essa variável definida, é possível utilizá-la em qualquer parte do arquivo .scss ou .sass:

body { background-color: $cor-primaria; }

7. Como utilizar mixins no SASS?

Outra funcionalidade interessante do SASS são os mixins, que permitem definir blocos de estilo que podem ser reutilizados em diferentes partes do CSS. Para definir um mixin no SASS, basta utilizar a seguinte sintaxe:

@mixin nome-do-mixin { propriedade: valor; }

Para utilizar um mixin em um seletor, basta utilizar a diretiva @include:

body { @include nome-do-mixin; }

8. Como utilizar seletores aninhados no SASS?

Uma das funcionalidades mais poderosas do SASS é a possibilidade de utilizar seletores aninhados. Com essa funcionalidade, é possível escrever estilos mais organizados e evitar a repetição de código. Por exemplo, em vez de escrever:

body { color: #000; }

body p { font-size: 16px; }

body ul li { list-style: none; }

É possível utilizar a sintaxe de seletores aninhados:

body { color: #000; }

  p { font-size: 16px; }

  ul li { list-style: none; }

9. Como utilizar o Autoprefixer no SASS?

O Autoprefixer é uma ferramenta que adiciona automaticamente os prefixos necessários às propriedades CSS para garantir que funcionem em todos os navegadores. Para utilizá-lo com o SASS, basta adicionar a seguinte linha de código no arquivo webpack.config.js:

Encore.enablePostCssLoader((options) => {

  options.config = {

    path: 'postcss.config.js',

  };

});

Em seguida, é necessário criar o arquivo postcss.config.js na raiz do projeto e adicionar o seguinte conteúdo:

module.exports = {

  plugins: [require('autoprefixer')]

};

10. Como utilizar o SASS no Symfony?

Para utilizar o SASS no Symfony, basta adicionar os arquivos .scss ou .sass na pasta assets/css do projeto e utilizar o comando yarn encore dev (ou yarn encore production para gerar a build de produção). O Webpack Encore irá compilar os arquivos SASS em arquivos CSS e colocá-los na pasta public/build.