file.scss

// Quick Example
@mixin underline($width) {
	width: #{$width};
}

h2 {
	@include underline('50%');
}

// Full Example

// Mixin for the background cover
@mixin bg-cover {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

// Mixin for the tile repeat
@mixin finance-tile($name, $url) {
  .finance-tile-#{$name} {
    width: 100%;
    height: 300px;
    position: relative;
    background: url(#{$url}) no-repeat center center;

    @include bg-cover;

    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }
}

// Calling the mixin for each tile
@include finance-tile('one', 'https://web-12.s3.amazonaws.com/draytons/wp-content/uploads/2019/05/07164440/Finance-13.png');
@include finance-tile('two', 'https://web-12.s3.amazonaws.com/draytons/wp-content/uploads/2019/05/07164440/Finance-13.png');
@include finance-tile('three', 'https://web-12.s3.amazonaws.com/draytons/wp-content/uploads/2019/05/07164440/Finance-13.png');
@include finance-tile('four', 'https://web-12.s3.amazonaws.com/draytons/wp-content/uploads/2019/05/07164440/Finance-13.png');