Directives inside property expressions

debug.scss

.grid--debug-cols:before {
  content: '';
  position: absolute;
  margin: 0 auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  $cols: 5;
  $output: ();

  @for $i from 1 through $cols {
    $output: append($output, #{"blue #{percentage($i/$cols)},"});
    $output: append($output, #{"transparent #{percentage($i/$cols)},"});
    $output: append($output, #{"transparent calc( #{percentage($i/$cols)} + 23px),"});
    $output: append($output, #{"blue calc(#{percentage($i/$cols)} + 23px),"});
  }

  background-image: linear-gradient(left,
    transparent,
    transparent 23px,
    blue 23px,
    unquote($output)
    blue 100%,
    transparent 100%
  );
}