@scope
Rule @scope
Imagina que tenemos una tarjeta (.card) que tiene un título (.title). Pero dentro de esa tarjeta, podemos tener otro componente (como un .badge o una .media-object) que también tiene su propio .title.
El Problema: Normalmente, si escribes .card .title { color: blue; }, ambos títulos se volverán azules.
La Solución con @scope: Usamos @scope para decirle al CSS de la tarjeta que no debe aplicarse a los elementos que están dentro del .badge.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de @scope</title>
<link rel="stylesheet" href="1.scope.css">
</head>
<body>
<h1>Ejemplo de <code>@scope</code></h1>
<article class="card">
<h2 class="title">Este es el Título de la Tarjeta</h2>
<p>Este párrafo debe heredar los estilos de la tarjeta.</p>
</article>
<article class="card">
<h2 class="title">Este es el Título de la Tarjeta</h2>
<p>Este párrafo también.</p>
<div class="badge">
<h3 class="title">Título de la Insignia</h3>
<p>Este bloque es un componente separado y no debe ser afectado por los estilos de .card .</p>
</div>
</article>
</body>
</html>En la Tarjeta 1: El .title ("Este es el Título de la Tarjeta") será grande (1.75rem) y de color oscuro (#333), tal como lo define el ámbito de .card.
En la Tarjeta 2:
- El primer .title (el de la tarjeta) será grande y oscuro.
- El segundo .title ("Título de la Insignia") no se verá afectado por los estilos de .card. En su lugar, usará los estilos de su propio ámbito (.badge), siendo pequeño (1rem) y de color azul (#007c91).