// Helpers
// ==========================================================================

// If image-url is not defined (if we are not in a Rails environment)
// Set a path to /public/images
@if not(function-exists(image-url)) {
  $path: "/public/images/";
}

// Return ems from a pixel value
// This assumes a base of 19px
@function em($px, $base: 19) {
  @return ($px / $base) + em;
}

// Want to see how the grid works?
// add this class to the body to see how grid padding is set
.example-highlight-grid {
  .grid-row {
    background: $grey-2;
  }

  .column-highlight {
    background: $grey-3;
    width: 100%;
  }

}

// Hide, but not for screenreaders
.visually-hidden,
.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

// Helpers
// ==========================================================================

// If image-url is not defined (if we are not in a Rails environment)
// Set a path to /public/images
@if not(function-exists(image-url)) {
  $path: "/public/images/" !default;
}

// Return ems from a pixel value
// This assumes a base of 19px
@function em($px, $base: 19) {
  @return ($px / $base) + em;
}

// Want to see how the grid works?
// add this class to the body to see how grid padding is set
.example-highlight-grid {
  .grid-row {
    background: $grey-2;
  }

  .column-highlight {
    background: $grey-3;
    width: 100%;
  }

}

// Hide, but not for screenreaders
.visually-hidden,
.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

Add `!default` flag to image `$path`
Add `!default` flag to image `$path`

The `!default` flag will only update the value of the variable when it has not been set. Adding this flag makes it easier to set when including elements modules in project specific files.
