ionic-framework/ionic/util/mixins.scss

// Color Mixins/Functions
// --------------------------------------------------

@function get-color($color, $tone: base) {
  @return red;
}

@function inverse($color-name) {
  @if (lightness( color($color-name) ) > 70) {
    @return #000;
  }
  @else {
    @return #fff;
  }
}

@function darken-or-lighten($color, $amount:12%) {
  // lightness is a percent value, 0% darkest, 100% lightest
  $lightness-percent: lightness($color);


  @if ($lightness-percent > 80) {
    // really light foreground color, so really darken it up
    @return darken($color, ($amount * 2));
  }

  @if ($lightness-percent < 35) {
    // dark foreground color, so light it up
    @return lighten($color, $amount);
  }

  // default to darken
  @return darken($color, $amount);
}

@function color($color-name) {
  @return map-get($colors, $color-name);
}

@function auxiliary-colors() {
  @return map-remove($colors, primary);
}



// Appearance
// --------------------------------------------------

@mixin appearance($val) {
  -webkit-appearance: $val;
  -moz-appearance: $val;
}



// User Select None
// --------------------------------------------------

@mixin user-select-none() {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}



// Input Placeholder
// --------------------------------------------------

@mixin placeholder($color: #999, $text-indent: 0) {
  &::-moz-placeholder { // Firefox 19+
    color: $color;
  }
  &:-ms-input-placeholder {
    color: $color;
  }
  &::-webkit-input-placeholder {
    color: $color;
    // Safari placeholder margin issue
    text-indent: $text-indent;
  }
}



// String Replace Function
// --------------------------------------------------

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}



// URL Encode Function
// --------------------------------------------------

@function url-encode($val) {
  $val: str-replace($val, ' ', '%20');
  @return $val;
}



// SVG Background Image Mixin
// --------------------------------------------------

@mixin svg-background-image($svg) {
  $url: url-encode($svg);
  background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
}



// calc()
// --------------------------------------------------

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}