Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

// Generates background properties for Cartesian axes in specified quadrant
@mixin axes($q: 1, $bg-colour: rgba(#fff,0.5), $pad: 0.5em) {
  // Define pairs for x-axis position. y-axis is always opposite
  $x-pairs: ((bottom, right), (bottom, left), (top, left), (top, right));
  // Define quadrants in which each axis is inverted
  $x-invert: (false, true, true, false);
  $y-invert: (false, false, true, true);

  $base: '/workspace/assets/images/layout/';
  $x-vert: nth(nth($x-pairs, $q), 1);
  $x-horz: nth(nth($x-pairs, $q), 2);
  $x-axis: url($base + 'x_axis' + if(nth($x-invert, $q), '_inverted', '') + '.svg');
  $y-axis: url($base + 'y_axis' + if(nth($y-invert, $q), '_inverted', '') + '.svg');

  background: $x-axis, $y-axis, $bg-colour;
  background-repeat: no-repeat;
  background-position: $x-vert $pad $x-horz $pad, opposite-position($x-vert) $pad opposite-position($x-horz) $pad;
}

div {
  @include axes(4);
}

SassMeister-output.css

div {
  background: url("/workspace/assets/images/layout/x_axis.svg"), url("/workspace/assets/images/layout/y_axis_inverted.svg"), rgba(255, 255, 255, 0.5);
  background-repeat: no-repeat;
  background-position: top 0.5em right 0.5em, bottom 0.5em left 0.5em;
}