A partir das últimas versões do **Chrome** e **Safari** (este na verdade está em preview) é possível utilizar um novo recurso chamado `Nested CSS` ou `CSS Nesting`.

Usando o exemplo que está no link da Fonte, antigamente para fazer um seletor de um nó que está "nested" (um dentro do outro), você precisava escrever a seguinte regra css:

```css
.foo {
  color: green;
}

.foo .bar {
  font-size: 1.4rem;
}
```

Assim você conseguiria mudar o tamanho da fonte do `foo->bar`. Mas com o "nesting" de CSS você pode escrever uma "árvore", por exemplo:

```css
.foo {
  color: green;
  
 .bar {
    font-size: 1.4rem;
  }
}
```

Há outros detalhes e regras importantes sobre essa nova forma de escrever CSS, então sugiro ler o artigo que está na Fonte.

Muito bom!

Fico pensando... Será o inicio do fim dos pré-processadores?

Carambolas, sempre pensei que isso devia ser por padrão.
Pior que agora até acostumar a escrever da nova maneira vai demorar rs

WebKit agora possui suporte a "Nested CSS" ou "CSS aninhado"

A partir das últimas versões do Chrome e Safari (este na verdade está em preview) é possível utilizar um novo recurso chamado Nested CSS ou CSS Nesting. Usando o exemplo que está no link...