Utility functions in SCSS

mixin-functions.scss

// Center an absolute item [assumption that container is `position: relative`]
// Provide direction, length of item to be centered [any unit type], and length of container along side of direction
// Usage: @include center-absolute('top', 90px, 100%);

@mixin center-absolute(
  $direction, 
  $itemSize, 
  $containerSize) {
    position: absolute;
    @if (
      $direction == 'TD' or 
      $direction == 'td' or 
      $direction == 'top' or 
      $direction == 'down'
    ) { top: calc(($containerSize / 2) - ($itemSize / 2)); }
    @if (
      $direction == 'LR' or
      $direction == 'lr' or
      $direction == 'left' or
      $direction == 'right'
    ) { left: calc(($containerSize/2) - ($itemSize /2)); }
}

// Remove mouse selection over text
@mixin no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}