container-query (_mediaqueries.scscs)

Tipo: Mixin

Versión: 2.0.1

Genera una regla @container para adaptar un componente al espacio disponible en su contenedor. A diferencia de media, media-range y brp, la consulta no depende del tamaño general de la ventana, sino del ancestro que establece el contexto de contención.

La interfaz secuencial consulta max-width con un enfoque desktop-first y usa 1920px de forma predeterminada. El mixin no declara container-name ni container-type: debes configurarlos en el contenedor; para consultar el alto, utiliza un tipo de contención que también controle esa dimensión.

Interface

@mixin container-query($point: 1920, $name: null, $units: px);

Parámetros secuenciales

Parámetro	Tipo	Default	Descripción
point	Number	1920	Genera el límite max-width de la consulta desktop-first.
name	String \| Keyword	null	Selecciona un contenedor nombrado; null usa el contenedor elegible más cercano.
units	String	px	Define la unidad aplicada a point cuando no tiene unidad.

Sintaxis alternativa (map)

@include container-query((
    name: product_card_demo,
    operator: and,
    unit: px,
    max_width: 480
)) { ... }

Clave	Tipo	Default	Descripción
name	String \| Keyword	null	Selecciona el nombre establecido mediante container-name.
operator	Keyword	and	Combina todas las condiciones mediante and u or.
unit \| units \| u	String	px	Define la unidad aplicada a las dimensiones sin unidad.
width	Number	null	Genera una condición width exacta.
min_width	Number	null	Genera una condición min-width inclusiva.
max_width	Number	null	Genera una condición max-width inclusiva.
height	Number	null	Genera una condición height exacta.
min_height	Number	null	Genera una condición min-height inclusiva.
max_height	Number	null	Genera una condición max-height inclusiva.
aspect_ratio	Number \| Ratio	null	Genera una condición aspect-ratio exacta.
min_aspect_ratio	Number \| Ratio	null	Genera una condición min-aspect-ratio inclusiva.
max_aspect_ratio	Number \| Ratio	null	Genera una condición max-aspect-ratio inclusiva.
orientation	Keyword	null	Genera portrait o landscape.

Ejemplo

Arrastra horizontalmente la esquina inferior derecha del contenedor. Cuando su ancho es igual o menor a 480px, la tarjeta cambia de dos columnas a una, aunque el ancho de la ventana no cambie.

SISASS

Componente adaptable Su distribución depende del contenedor.

<div class="example_container_query">
    <div class="example_container_query_card">
        <div class="example_container_query_image">SISASS</div>
        <div class="example_container_query_content">
            <strong>Componente adaptable</strong>
            <span>Su distribución depende del contenedor.</span>
        </div>
    </div>
</div>