mask (_vendor.scscs)

Tipo: Mixin

Versión: 2.x.x

Mixin vendor de SISASS para la propiedad mask.

Define una máscara visual que controla qué partes de un elemento permanecen visibles. Genera la propiedad con prefijo -webkit- y después agrega la versión estándar.

Interface

@mixin mask($br);

Parámetros secuenciales

Parámetro Tipo Default Descripción
br String - Define el valor que se asignará a mask.

Ejemplo

En este ejemplo, ambos bloques comparten el mismo fondo con degradado. El primero se muestra completo. El segundo aplica una máscara radial con bordes transparentes, por lo que la figura visible se recorta hacia el centro y la diferencia se aprecia con claridad.

Sin mask

MASK

mask: radial-gradient(...)

MASK

            

            
<div class="mask_example">
    <div><h3 class="subtitle">Sin mask</h3><div class="sample">MASK</div></div>
    <div><h3 class="subtitle">mask: radial-gradient(...)</h3><div class="sample masked">MASK</div></div>
</div>