Estilos CSS anidados ~ ¿Dónde he visto este concepto antes?

No puedo encontrar esto ahora, pero lo he leído antes en varios blogs que discuten el tema. Daré un ejemplo y espero que sea claro (aunque no aclare nada en absoluto).

Dado este marcado (arbitrario a 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>

Mientras que el CSS podría leer así:

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

También podría escribirse así:

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

Pero no recuerdo haber visto dónde se discutió eso o si se está trabajando en algo. ¿Alguien sabe de qué demonios estoy hablando?

Y no creo que esta sea una pregunta SO o la hubiera puesto en SO.

html css

— jcolebrand
fuente

<strike> Solo una nota que no generará los mismos estilos que el margen ahora estará en los imgelementos dentro de la .imgclase. </strike>

— Josh K

@JoshK ~ ¿Por qué es eso? Tal vez mi realidad releyendo la materia LessCSS refrescará la memoria, pero parece ser más rápido que Google;)

— jcolebrand

Oh, me perdí el cierre }. Voy a limpiar esos ahora.

— Josh K

Sí, los dejé en línea porque los anteriores estaban en línea, no sabía si el orden importaba en el estilo CSS que había visto, y después de ver tu MENOS bloque a continuación, pensé que debería darles la vuelta, pero lo dejé para la posteridad sake;) ~ pero no me importa la edición, tengo ese poder de repetición en SO: D

— jcolebrand

Respuestas:

MENOS CSS

lenguaje de hoja de estilo dinámico diseñado por Alexis Sellier. Está influenciado por Sass y ha influido en la nueva sintaxis "SCSS" de Sass, que adaptó su sintaxis de formato de bloque tipo CSS. MENOS es de código abierto. Su primera versión fue escrita en Ruby, sin embargo, en las versiones posteriores, el uso de Ruby ha quedado obsoleto y reemplazado por JavaScript. La sintaxis con sangría de LESS es un metalenguaje anidado , ya que CSS válido es un código LESS válido con la misma semántica. LESS proporciona los siguientes mecanismos: variables, anidamiento, mixins, operadores y funciones; la principal diferencia entre LESS y otros precompiladores de CSS es que LESS permite la compilación en tiempo real a través de LESS.js por el navegador.] LESS puede ejecutarse en el lado del cliente y del servidor, o puede compilarse en CSS simple ...

MENOS usa esos estilos anidados.

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

— Josh K
fuente

egads eres rápido;)

— jcolebrand

Nos encanta sin punto.

— quentin-starin

También: sass-lang.com

— Juan Mendes

Además, sass y scss admiten la anidación.

Sass es una extensión de CSS3, que agrega reglas anidadas, variables, mixins, herencia de selector y más. Se traduce a CSS estándar bien formateado utilizando la herramienta de línea de comandos o un complemento de marco web.

Sass tiene dos sintaxis. La sintaxis más utilizada se conoce como "SCSS" (para "Sassy CSS"), y es un superconjunto de la sintaxis de CSS3. Esto significa que cada hoja de estilo CSS3 válida también es SCSS válida. Los archivos SCSS usan la extensión .scss.

La segunda sintaxis anterior se conoce como sintaxis sangrada (o simplemente ".sass"). Inspirado por la brevedad de Haml, está dirigido a personas que prefieren concisión en lugar de similitud con CSS. En lugar de corchetes y punto y coma, utiliza la sangría de líneas para especificar bloques ...

— Mladen Jablanović
fuente