fill

@include fill(
  $unit,
  $position
);

Description

Ensure that a child element fills the size of it's parent container.

Parameters

$unit (unit | list | unset)
Unit of measurement(s) that reference the top | right | bottom | left values.
Default: 0

$position (valid position)
Value of position property.
Default: absolute

Return

(CSS) position property along with top, right, bottom, and left properties.

Examples

Add slight overlay to improve legibility of text over image

/* Set up parent container */
.foo-container {
  position: relative;
}

/* Fit image to fill its parent */
.bar-color {
	@include fill();
  background: rgba(0, 0, 0, 0.25);
}

Add color overlay that is inset from the edge of the container

/* Set up parent container */
.foo-container {
  position: relative;
}

/* Fit image to fill most of its parent */
.bar-color {
	@include fill(1em);
}