Normaliza los estilos para las propiedades referentes al background. Puedes usarlo para aplicar colores, imágenes de fondo o gradientes. El atributo url genera un background-image con url(), mientras que image permite pasar cualquier valor válido de background-image (por ejemplo, gradientes o imágenes inline).
También puedes controlar repetición, posición y size del background con las claves disponibles en el map. El mixin también admite los aliases u, r, p, c, s e i para url, repeat, position, color, size e image.
@mixin background($attr: (
url: "",
repeat: no-repeat,
position: center,
color: transparent,
size: auto,
image: ""
);
| Clave | Tipo | Default | Descripción |
|---|---|---|---|
| url | u | String | "" | Valor a utilizar en la función url con background-image. |
| repeat | r | String | no-repeat | Valor a utilizar con background-repeat. |
| position | p | String | center | Valor a utilizar con background-position. |
| color | c | Color | transparent | Valor a utilizar con background-color. |
| size | s | String | auto | Valor a utilizar con background-size. |
| image | i | String | "" | Valor a utilizar con background-image. |
<div class="box background_gradient_linear"></div>
<div class="box background_gradient_radial"></div>
<div class="box background_gradient"></div>
<div class="background_image"></div>