Estilos CSS aninhados ~ Onde eu já vi esse conceito antes?

Não consigo encontrar isso agora, mas já li em vários blogs discutindo o tópico. Vou dar um exemplo e espero que seja claro (embora possa não esclarecer nada).

Dada essa parte da marcação (arbitrária de propósito):

<div class="myWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>
<div class="yourWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>

Enquanto o CSS poderia ler assim:

.myWrapper .img img {border: thin black solid;}
.myWrapper .img {margin:10px;}
.yourWrapper .img img {border: thick red dashed;}
.yourWrapper .img {margin:20px;}

Também poderia ser escrito assim:

.myWrapper {
  .img { 
    margin:10px;
    img {
        border: thin black solid;
    }
  }
}
.yourWrapper {
  .img { 
    margin:10px;
    img {
        border: thick red dashed;
    }
  }
}

Mas não me lembro de ver onde isso foi discutido ou se há algo em andamento. Alguém sabe do que diabos estou falando?

E não acho que seja uma pergunta SO, ou eu a colocaria na SO.

html css

— jcolebrand
fonte

<strike> Apenas uma observação que não gerará os mesmos estilos que a margem agora estará nos imgelementos da .imgclasse. </strike> #

— Josh K Josh K

@ Josh ~ Por que isso? Talvez a minha verdade re-ler o material lesscss vai refrescar minha memória, mas você parece ser mais rápido do que o Google;)

— jcolebrand

Oh, eu perdi o fechamento }. Eu vou limpar esses agora.

— Josh K

Sim, eu os deixei em linha, porque os anteriores estavam em linha, eu não sabia se a ordem importava no estilo CSS que eu tinha visto, e depois de ver o seu bloco MENOS abaixo, achei que deveria dar um salto, mas deixei para a posteridade causa;) ~ mas eu não me importo de edição, eu tenho que rep-poder no SO: D

— jcolebrand

Respostas:

MENOS CSS

linguagem de folha de estilo dinâmica criada por Alexis Sellier. É influenciado pelo Sass e influenciou a nova sintaxe "SCSS" do Sass, que adaptou sua sintaxe de formatação de bloco semelhante ao CSS. LESS é de código aberto. Sua primeira versão foi escrita em Ruby, no entanto, nas versões posteriores, o uso do Ruby foi preterido e substituído pelo JavaScript. A sintaxe indentada de LESS é uma metalinguagem aninhada , pois CSS válido é um código LESS válido com a mesma semântica. O LESS fornece os seguintes mecanismos: variáveis, aninhamento, mixins, operadores e funções; a principal diferença entre o LESS e outros pré-compiladores de CSS é que o LESS permite compilação em tempo real via LESS.js pelo navegador.] O LESS pode ser executado no lado do cliente e no servidor ou pode ser compilado em CSS simples ...

LESS usa esses estilos aninhados.

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

— Josh K
fonte

egads você é rápido;)

— jcolebrand

Nós amamos dotLess.

— Quentin-starin

Também: sass-lang.com

— Juan Mendes

Além disso, sass e scss suportam aninhamento.

Sass é uma extensão do CSS3, adicionando regras aninhadas, variáveis, mixins, herança de seletor e muito mais. É traduzido para CSS padrão e bem formatado, usando a ferramenta de linha de comando ou um plug-in de estrutura da web.

Sass tem duas sintaxes. A sintaxe mais usada é conhecida como "SCSS" (para "Sassy CSS") e é um superconjunto da sintaxe do CSS3. Isso significa que toda folha de estilo CSS3 válida também é SCSS válida. Os arquivos SCSS usam a extensão .scss.

A segunda sintaxe mais antiga é conhecida como sintaxe recuada (ou apenas ".sass"). Inspirado na discrepância de Haml, é destinado a pessoas que preferem concisão ao invés de semelhança com CSS. Em vez de colchetes e ponto e vírgula, ele usa o recuo de linhas para especificar blocos ...

— Mladen Jablanović
fonte