https://takao.blog/es/tags/sass/Recent content in Sass on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/css-nesting-standard-syntax/Fri, 15 Aug 2025 00:00:00 +0900https://takao.blog/es/web/css-nesting-standard-syntax/<img src="https://takao.blog/img/thumbnail/css-nesting-standard-syntax-es.png" alt="Featured image of post Sintaxis estándar de anidamiento CSS sin preprocesadores" /><h2 id="introducción">Introducción </h2><p>El anidamiento CSS ahora es nativo en todos los navegadores modernos, sin necesidad de Sass, Less o PostCSS.</p> <h2 id="sintaxis-básica">Sintaxis básica </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">card</span> { <span style="color:#66d9ef">background-color</span>: <span style="color:#ae81ff">#fff</span>; <span style="color:#960050;background-color:#1e0010">.card-title</span> <span style="color:#960050;background-color:#1e0010">{</span> <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">1.5</span><span style="color:#66d9ef">rem</span>; } <span style="color:#f92672">&amp;</span>:<span style="color:#a6e22e">hover</span> { <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> rgba(<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">0.1</span>); } <span style="color:#960050;background-color:#1e0010">}</span> </span></span></code></pre></div><p>Ya no se requiere el prefijo <code>&amp;</code> para anidar selectores de clase o elemento.</p> <h2 id="diferencia-clave-con-sass">Diferencia clave con Sass </h2><p>CSS nativo NO soporta concatenación de sufijos tipo BEM (<code>&amp;--large</code> es inválido). En su lugar, escribe la clase completa: <code>&amp;.button--large</code>.</p> <h2 id="posicionamiento-del-">Posicionamiento del &amp; </h2><p>Puedes usar <code>&amp;</code> al final o en medio de un selector para estilos contextuales: <code>.dark-mode &amp; { color: #fff; }</code>.</p>