As diferenças entre CSS nativo e Sass Nesting

Desde o seu lançamento, o CSS tem-se recusado obstinadamente a suportar uma sintaxe para aninhar selectores. A alternativa sempre foi usar um pré-processador CSS como o Sass. Mas hoje, o aninhamento é oficialmente parte do CSS nativo. Pode experimentar esta funcionalidade diretamente nos browsers modernos.

Ao fazer a transição do Sass para o CSS nativo, é essencial ter em atenção as discrepâncias nas convenções de aninhamento utilizadas por cada sintaxe. Estas distinções podem ter um impacto considerável na estrutura do seu código e no estilo geral, pelo que é imperativo que se familiarize com estas variações antes de efetuar a mudança.

Você precisa usar “&” com seletores de elementos em CSS nativo

CSS Nesting ainda é um rascunho de especificação, com suporte variável do navegador. Certifique-se de que consulta sites como caniuse.com para obter informações actualizadas.

Aqui está uma demonstração do tipo de estrutura aninhada que pode ser empregue em Sass utilizando a sintaxe SCSS:

 .nav {
  ul { display: flex; }
  a { color: black; }
}

O trecho de código fornecido refere-se a regras de estilo para a barra de navegação de um documento HTML. Especificamente, determina que quaisquer listas ordenadas contidas num elemento com a classe “nav” devem ser apresentadas num alinhamento flexível (coluna). Além disso, determina que qualquer texto com hiperligação que apareça dentro desses elementos deve ter uma cor preta.

Nas CSS nativas, a forma de aninhamento acima referida é considerada inaceitável. Para que esta estrutura funcione eficazmente, é necessário incorporar o símbolo do E comercial (&) antes de cada elemento incluído, conforme ilustrado abaixo:

 .nav {
  & ul { display: flex; }
  & a { color: black; }
} 

Antes de uma alteração recente, a iteração inicial das Folhas de estilo em cascata (CSS) não permitia a inclusão de selectores de tipo. No entanto, com o último ajuste em vigor, é agora possível omitir a utilização do símbolo “&” ao incluir selectores de tipo. No entanto, os utilizadores devem ter em atenção que as iterações mais antigas de navegadores Web, como o Google Chrome e o Apple Safari, podem ainda não ser compatíveis com esta metodologia revista.

Nos casos em que um seletor começa com um símbolo, como um seletor de classe, é permitido excluir o e comercial ao escrever código CSS ou Sass. Isto significa que a sintaxe fornecida funcionará corretamente tanto em CSS convencional como em Sass.

 .nav {
  .nav-list { display: flex; }
  .nav-link { color: black; }
}

Não é possível criar um novo seletor usando “&” no CSS nativo

Um dos aspectos atraentes do Sass que você pode apreciar é sua capacidade de facilitar a geração de código por meio de construções como a demonstrada abaixo:

 .nav {
  &-list { display: flex; }
  &-link { color: black; }
}

O código Sass acima mencionado, após a compilação, produz a saída CSS não processada subsequente:

 .nav-list {
  display: flex;
}

.nav-link {
  color: black;
}

No CSS padrão, a utilização do símbolo “&” para criar um novo seletor não é suportada. No entanto, ao utilizar o Sass, o compilador substitui efetivamente o “&” pelo elemento envolvente, como “.nav”, evitando assim a formação de um seletor composto impróprio que produziria resultados diferentes dos pretendidos.

Esta instância de código deve funcionar corretamente utilizando a sintaxe CSS nativa:

 .nav {
  &.nav-list { display: flex; }
  &.nav-link { color: black; }
}

O código fornecido funciona devido à correspondência entre os selectores utilizados no mesmo. O primeiro seletor corresponde a elementos com nomes de classe “nav-list” ou “nav-link”, enquanto o segundo seletor visa especificamente os elementos com um nome de classe “nav-link”. A colocação de um espaço entre o símbolo “&” e o seletor subsequente (por exemplo, “nav .nav-list”) resultaria num erro de sintaxe inválido, uma vez que criaria um novo grupo constituído pelas classes “nav” e “.nav-list”, em vez de visar elementos que possuem ambas as classes.

No CSS nativo, a utilização de um símbolo de E comercial da forma demonstrada abaixo resultará num erro semântico:

 .nav {
  &__nav-list { display: flex; }
  &__nav-link { color: black; }
}

É o mesmo que escrever isto:

 __nav-list.nav {
  display: flex;
}

__nav-link.nav {
  color: black;
}

Pode ser inesperado, dado que ambos os elementos e residem no seletor .nav . No entanto, o e comercial ( & ) posiciona efetivamente os elementos aninhados antes do seu elemento pai.

A especificidade pode ser diferente

Vale a pena mencionar o efeito na precisão que ocorre com a sintaxe aninhada do Sass, em oposição à sua contraparte no CSS padrão, que merece atenção.

De facto, assumindo que existe um elemento principal e um elemento de artigo na sua estrutura HTML, a utilização do estilo CSS fornecido resultaria em que qualquer etiqueta h2 contida nesses elementos respectivos fosse apresentada com um tipo de letra serif.

 #main, article {
  h2 {
    font-family: serif;
  }
}

O CSS resultante gerado a partir do código Sass mencionado acima aparece da seguinte forma:

 #main h2,
article h2 {
  font-family: serif;
}

Em contraste com a utilização de selectores aninhados no CSS nativo, a utilização de uma estrutura equivalente através da mesma sintaxe produzirá um resultado comparável.

 :is(#main, article) h2 {
  font-family: serif;
}

O seletor is() em LESS difere ligeiramente do seu homólogo em Sass no que diz respeito ao tratamento das regras de especificidade. Em particular, quando se utiliza :is() , a especificidade do seletor é automaticamente elevada para a do elemento mais específico da lista de parâmetros fornecidos.

A ordem dos elementos pode alterar o elemento selecionado

O ato de aninhar no CSS nativo tem o potencial de alterar o significado pretendido de um determinado seletor, acabando por selecionar um elemento totalmente distinto.

Considere o seguinte HTML, por exemplo:

 <div class="dark-theme">
  <div class="call-to-action">
    <div class="heading"> Hello </div>
  </div>
</div>

E o seguinte CSS:

 body { font-size: 5rem; }

.call-to-action .heading {
  .dark-theme & {
    padding: 0.25rem;
    background: hsl(42, 72%, 61%);
    color: #111;
  }
}

A utilização do Sass como pré-processador de CSS produz o seguinte resultado:

Num contexto HTML, se o elemento com a designação de classe “dark-theme” for inserido no contentor principal denotado pela classificação “call-to-action”, os critérios de seleção resultantes utilizados pelo Sass (um pré-processador CSS) tornar-se-ão disfuncionais. No entanto, ao abrigo da convenção CSS convencional (ou seja, sem recurso a pré-processadores CSS), as propriedades de estilo associadas permanecerão inalteradas e eficazes.

O comportamento resulta da forma como a pseudo-classe :is() funciona internamente, resultando na geração da subsequente representação CSS sem adornos mostrada abaixo:

 .dark-theme :is(.call-to-action .heading) {
  /* CSS code */
}

O cabeçalho em questão é um descendente tanto do elemento .dark-theme como do elemento .call-to-action , mas a sua ordem específica não afecta a sua funcionalidade. Desde que o título seja um descendente de ambos os elementos, o facto de estarem numa determinada ordem não afecta o resultado.

Neste cenário específico, trata-se de um caso menos comum, mas a compreensão do mecanismo intrínseco do seletor :is() pode melhorar a proficiência de alguém no que diz respeito a elementos aninhados em CSS. Além disso, esse conhecimento facilita o processo de resolução de problemas de CSS de forma mais eficaz.

Saiba como usar o Sass no React

Como resultado de sua capacidade de compilar para CSS, o Sass é compatível com uma ampla gama de estruturas de IU devido à sua compatibilidade com praticamente qualquer estrutura desse tipo. Sua instalação em várias plataformas, incluindo Vue, Preact, Svelte e React, é fácil, oferecendo uma experiência de integração perfeita em diferentes tecnologias.

A utilização do Sass no contexto do React oferece várias vantagens, nomeadamente a capacidade de criar estilos bem organizados e reutilizáveis através da implementação de variáveis e mixins. A proficiência nesta tecnologia pode aumentar significativamente a capacidade de produzir código refinado e engenhoso, promovendo o crescimento profissional como um programador React.