Olá mundo, tudo bom com ocês ? Hoje quero falar um pouco sobre scss e algumas novidades que existem / viram.
Caso queria ver o funcionamento de todas as novas features e/ou modificar algumas coisas basta acessar meu repo scss-like-you-never-seen e seguir o passo-a-passo para visualizar. deixa uma starzinha também ❤️
Antes de tudo !important
Algumas das funcionalidades que vou mostrar não possuem suporte ainda em todos os navegadores, mas é possível testa-las habilitando as flags respectivas em seu navegador.
EX: chrome://flags
basta agora procurar a flag desejada, habilitar e reiniciar o navegador.
Para ter uma leitura mais agradável e ver cada uma das fetures aconselho a clonar o meu repo scss-like-you-never-seen e rodar ele localmente. Dentro de cada pasta do repo existe um README.md explicando a feature.
Eu posso utilizar essas features ?
A documentação do SASS recomenda utilizar o sass ou dart-sass como compilador do projeto e assim conseguindo usar todas essas features sem problema. Caso você esteja utilizando ruby-sass ou lib-sass por exemplo acredito que não será capaz, visto que está deprecated.
Sass module mode
A uns anos atrás foi lançado um feature no scss que é chamado de scss modules basicamente ela permite que o seu estilo funcione como um modulo da aplicação assim liberando alguns recursos interessantes.
Existem duas formas de se utilizar o sass module:
nome.module.scss ou _nome.scss
Nas duas formas você vai poder usufruir de todos os recursos do sass module.
As novidades que vieram foi justamente o @use que permite que você importe um arquivo de estilo dentro de outro, para ser utilizado naquele contexto.
@foward que permite que você importe um arquivo de estilo dentro de outro e que ele seja passado para frente na importação.
Porque o @import é um problema ?
Usando o @import no scss encontramos um problema, um arquivo que possui por exemplo margin: 5rem; no final pode ficar com margin: 10rem;, caso tenha alguma váriavel com o mesmo nome da qual alimenta aquela propriedade, visto que o @import na hora da compilação leva em consideração a ordem.
EXAMPLE:
@import "spacings"; // margin: 10rem;
@import "variables";// margin: 5rem;
@import "mixins";
@import "colors";
.container {
margin: var(--margin); // essa margin vem do variables
}
Caso a gente altere a ordem de importação, na hora que ocorrer a compilação será alterado o valor.
@import "variables";// margin: 5rem;
@import "spacings"; // margin: 10rem;
@import "mixins";
@import "colors";
.container {
margin: var(--margin); // essa margin vem do spacings
}
O sass compila de forma procedural, ou seja, o valor da propriedade vai ser alterado de acordo com a última variável encontrada.
O problema que o @use e @foward resolve
@foward
Ele é similar ao @import, você vai passar para frente oque estiver em um contexto, não haverá sobre escrita.
@use
É utilizado no contexto e recebe um namespace, então se o meu arquivo se chama util tudo que eu utilizar ali será necessário passar o util como prefixo.
EX:
@use "_util";
.container {
margin: util.$margin;
}
Caso não queria usar o namespace, esteja em processo de migração ou deseja utilizar outro nome porque o atual é grande, basta utilizar as e colocar um alias.
@use "_util" as u; // o prefixo agora é `u`
@use "_animations" as *; // não será necessário passar o namespace
7-1 pattern scss
"One file to RULE them all.
One file to FIND them.
One file to BRING them all.
And in the sass way MERGE them".
Esse é o pattern mais utilizado para desfrutar do scss modules, ou seja, o scss modules é um modo de modularizar, cada arquivo é um componente, e cada componente é um modulo. A sua estrutura é a seguinte:
abstracts, vendors, base, layout, components, pages e themes
Existem vários patterns 4-1, 5-1 etc. Tudo vai depender da sua necessidade.
particularmente utilizo bastante esse para meus projetos:
styles/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _color.scss # Paleta de cores da aplicação
| |– _typography.scss # Typography rules
| |– _index.scss # File used to import all base
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
|
|– pages/ # Base views -> HOME, ABOUT, CONTACT etc.
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
|
|– themes/
| |– _theme.scss # Default theme
|
|– abstract/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _index.scss # File used to import all abstracts
|
`– _index.scss # Main Sass file
Container Queries
Para utilizar o @container é necessário definir um query para o componente, fazemos isso da seguinte forma:
.nosso-wrapper {
container-name: wrapper;
container-type: inline-size;
}
O que fizemos a cima foi definir o tipo do container e o nome dele.
Note que o @container tem o mesmo funcionamento do @media, entretanto oque diferencia os dois é o container vai ter o adicional de poder utilizar operadores lógicos para definir o tamanho do container.
Oque também diferencia o @container do @media é que ele ajusta o tamanho dos elementos baseado na classe pai e não pelo tamanho do viewport.
EX:
@container wrapper (inline > 50px) {
.nossa-classe {
display: grid;
align-items: center;
justify-content: center;
}
}
Compatibilidade: Chrome(🚧Beta), Firefox(🚧Beta), Chromium(🚧Beta) & Safari(✅Suportado)
Extend Rule
O extend é um recurso em que você replica o mesmo estilo de uma classe em outra.
Mas qual a diferença entre o @mixin e o @extend?
O mixin vai gerar uma copia daquele estilo em outro componente na hora da compilação.
Já o extends gera uma referência para a classe original.
EXAMPLE:
/// Mixin input
@mixin placeHolder {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.classe1 {
@include placeholder;
}
.classe2 {
@include placeholder;
}
/// Mixin output
.classe1 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.classe2 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/// Extend input
.placeHolder {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.classe1 {
@extend %placeHolder;
}
.classe2 {
@extend %placeHolder;
}
/// Extend output
.classe1,
.classe2 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Apesar do @extend ser mais simples, ele é tão poderoso quanto @mixin. Mas isso pode causar alguns problemas.
- Como a classe
.placeHolderé copiada para duas classes, elas são independentes e não se comportam como se fossem uma única classe. - Dependendo do comportamento da classe, a classe pai pode não ser a classe original.
Quando usar ou não o @extend?
- Mixin: Utilize para gerar seu código de modo dinâmico através de variáveis;
- Extend: Utilize para elementos comuns mas que haverá pouca repetição;
Quando for necessário criar algum tipo de automatização utilize o @mixin, caso contrario utilize o @extend, ou até mesmo os dois juntos.
Compatibilidade: Chrome(✅Suportado), Firefox(✅Suportado), Chromium(✅Suportado) & Safari(✅Suportado)
Has Selector
É uma pseudo classe que permite ao usuário selecionar um elemento do DOM e manipular caso o mesmo exista. Ele não pode ser utilizado dentro de classes css, somente selecionando seletores para seletores.
section:has(div) {
color: red;
}
<section>
<h1>Has Selector</h1>
<div>
<p>Message</p>
</div>
</section>
Compatibilidade: Chrome(🚧Beta), Firefox(🚧Beta), Chromium(🚧Beta) & Safari(✅Suportado)
Layer Rule
Define uma camada de cascata para ser trabalhada, as regas farão parte daquele contexto, não do escopo global da view.
EXAMPLE:
@layer base, component;
@layer base {
.button {
background: #eee;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
padding: 10px;
margin: 10px;
}
}
@layer component {
.button {
&__title {
font-size: 1.5rem;
font-weight: bold;
}
&__icon {
margin-right: 0.5rem;
}
}
}
A ordem de declaração de camadas é importante, pois a camada mais acima será a camada mais próxima do contexto, então caso você altere a ordem a prioridade do estilo também mudará.
A propriedade layer pode ser útil para resolver problemas de prioridade não sendo mais necessário usar o atributo important.
Compatibilidade: Chrome(✅Suportado), Firefox(✅Suportado), Chromium(✅Suportado) & Safari(✅Suportado)
Conclusão
Ufa!! Foram muitas coisas que conseguimos ver hoje. algumas ainda estão em estado de desenvolvimento e será necessário ativar flags do seu navegador para testar.
Caso queria ver o código funcional de cada funcionalidade apresentada aqui basta acessar o meu repo scss-like-you-never-seen deixa uma star!
Até a próxima.
Top comments (0)