`** terá o estilo **`display: flex`** em contextos padrão do projeto, mas quando a largura da tela for menor que 1024px, o estilo será alterado para **`display: grid`**, permitindo uma transição suave e eficiente entre layouts responsivos.
Aqui o resultado final, em um CSS padrão, ficaria assim:
```css
.dp-flex{
display: flex;
}
@media (max-width: 1024px){
.mob\:dp-grid{
display: grid;
}
}
```
Se for necessário atribuir novos tipos de breakpoints para o seu projeto, você pode editar essa lista de breakpoints presentes no *`wpf.config.yaml`* para criar seus próprios pontos de quebra customizados para designs responsivos.
### **Importância**
As **atribuições de importância** servem para definir, em um código CSS onde um elemento possuí duas vezes o mesmo atributo sob situações conflitantes, um ponto de partida para que o CSS descubra qual regra deve sempre se sobressair como o estilo dominante.
Leve por exemplo um elemento que precisa mudar o seu tamanho sem necessariamente estar sob um breakpoint. Ele tem um tamanho original de 50% (informado pela classe utilitária `w-50%`). Esse mesmo elemento receberá do JavaScript uma nova classe que mudará o seu tamanho para 25% (informado pela classe utilitária `w-25%`) quando o usuário clicar em algum botão dentro do site. Como são elementos conflitantes (a largura, no caso), dificilmente o navegador saberá entender que o valor de 25% é o correto a ser aplicado agora. Informando o código que o novo estilo **é mais importante** (atribuindo a classe utilitária com o modificador de importância `!w-25%`) agora o navegador saberá o momento em que o elemento precisa ter 25% de largura e o momento em que ele precisa ter 50%.
```html
```
O resultado final disso, em um arquivo CSS comum, seria bem simples:
```css
.w-50\%{
width: 50%;
}
.\!w-25\%{
width: 25%!important;
}
```
É possível adicionar esse tipo de comportamento à elementos que estão com **atribuições de responsividade**. Veja um exemplo:
```html
```
### **Pseudo Elementos**
Por último, existem as atribuições que chamamos normalmente no CSS como **pseudo elementos**. Isso implica a todos os elementos virtuais que podem ser gerados pelo *DOM* via CSS, como **:active, ::placeholder, ::after, ::before** etc. No WPF, alguns desses pseudo elementos possuem um suporte nativo pela ferramenta, e podem receber estilos e classes diretamente informando o pseudo-elemento que você deseja ativar/inserir para aquele elemento HTML.
Para definir um pseudo elemento à um elemento HTML é muito simples: basta você escrevê-lo antes da classe e de qualquer outra atribuição adicional que esteja inserindo à uma classe utilitária WPF. Daremos um exemplo:
```html
```
No exemplo acima, o elemento possuí a cor de background `var(--c-bg-1)` que é automaticamente alterada para `var(--c-bg-2)` no momento em que o usuário passar o cursor do mouse por cima do elemento, ou seja, através da ativação do pseudo elemento **:hover**. Esses tipos de atribuições não geram um resultado diretamente no CSS, mas são lidos de maneira dinâmica diretamente no navegador.
É importante lembrar que as **atribuições de pseudo elementos funcionam em conjunto com os outros tipos de atribuições, como as de responsividade ou importância**. Veja um exemplo:
```html
```
No exemplo acima, a versão natural do componente não possuí um comportamento com o pseudo elemento **:hover**. Esse comportamento foi instruído para acontecer somente em um contexto responsivo, com duas outras cores completamente diferentes.
# Declarando e Usando Variáveis CSS
As variáveis customizadas de cada projeto são inseridas dentro de uma pasta chamada **"vars"**. Todos os arquivos nessa pasta são automaticamente incluídos como variáveis no framework. No entanto, existe um arquivo específico dentro dessa pasta chamado `_default.scss`, onde ***variáveis especiais podem ser declaradas***.
É importante frisar que **variáveis especiais precisam ser declaradas entre aspas simples**. Isso é exigido não só pelo manual de boas práticas do próprio SASS como também porque essas variáveis passam por vários tratamentos específicos e não funcionarão de outra maneira.
[Sass Guidelines](https://sass-guidelin.es/#about-sass)
## **Grupos de Variáveis**
As variáveis são organizadas em grupos específicos pré-determinados para facilitar o gerenciamento e a aplicação consistente em todo o projeto. Alguns dos grupos comuns incluem:
### **Cores**
As cores são frequentemente organizadas em grupos separados com diferentes propósitos, como cores de fundo, cores de texto, cores de borda, cores de gradiente, etc. Aqui está um exemplo de como os grupos de cores podem ser declarados:
```scss
//* Cores de Fundo
$c-backgrounds: (
"c-bg-1": '#141616',
"c-bg-2": '#FFFFFF',
);
//* Cores de Texto
$c-strings: (
"c-s-1": '#FFFFFF',
"c-s-2": '#999999',
);
//* Cores de Bordas
$c-borders: (
"c-border-1": '#444444',
"c-border-2": '#666666',
);
```
### **Temas**
Os temas podem incluir uma variedade de cores específicas de design, como cores principais, secundárias, acentuadas, etc. Aqui está um exemplo de como os temas podem ser declarados:
```scss
//* Cores do Tema
$c-themes: (
"c-t1-050": #effcfc,
"c-t1-100": #d8f5f4,
"c-t1-400": #42c1c7, //? Main
);
```
## **Uso das Variáveis**
Depois de declaradas as variáveis, elas podem ser facilmente utilizadas em todo o projeto por meio de classes específicas. Por exemplo, para usar uma cor de fundo específica em um elemento HTML, podemos adicionar a classe correspondente:
```html
```
Se quisermos aplicar estilos diferentes para dispositivos móveis, podemos adicionar classes específicas para isso:
```html
```
Isso permite que tenhamos controle granular sobre a aparência de elementos em diferentes dispositivos.
## **Funções de Classe**
Além das classes específicas para aplicação de variáveis, também existem funções de classe para casos comportamentais diferentes. Por exemplo:
- Alterar a fonte de alguma maneira: **`fnt(var)`**
- Alterar a cor de fundo: **`bg(var)`**
- Alterar a cor de texto: **`c(var)`**
- Alterar a cor de borda: **`bc(var)`**
- Adicionar efeitos visuais: `fx(param,var)` / `fx(var)`
Essas funções de classe permitem uma aplicação mais flexível e eficiente das variáveis CSS em todo o projeto.
## Usando as variáveis dentro de outros arquivos SCSS
Todas as variáveis declaradas no arquivo `_default.scss` geram uma versão de variável CSS comum. Essa versão permite o uso das variáveis dentro de outros arquivos CSS do projeto.
Por exemplo, a variável **`c-bg-1`**, que pode ser diretamente usada no HTML como **`bg(c-bg-1)`**, também pode ser utilizada no CSS da seguinte maneira:
```css
background-color: var(--c-bg-1);
```
Isso oferece flexibilidade adicional para o uso das variáveis em diferentes contextos dentro do projeto.