Some useful Sass mixins

sass-mixins.md

###Fluid properties (via)

@mixin fp($property, $min, $max, $start: 320, $end: breakpoint('desktop'), $clip: true, $clipAtStart: true, $clipAtEnd: true) {
	$start: $start / ($start * 0 + 1);
	$end: $end / ($end * 0 + 1);
	$multiplier: ($max - $min) / ($end - $start) * 100;
	$adder: ($min * $end - $max * $start) / ($end - $start);
	$formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
	@if $clip and $clipAtStart {
		@media (max-width: #{$start + 0px}) {
			#{$property}: $min + 0px;
		}
	}
	@if $clip and $clipAtEnd {
		@media (min-width: #{$end + 0px}) {
			#{$property}: $max + 0px;
		}
	}
	#{$property}: $formula;
}

###Pseudo

@mixin pseudo($display: block, $pos: absolute, $content: ''){
  content: $content;
  display: $display;
  position: $pos;
}

###Responsive ratio

@mixin responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote( ( $y / $x ) * 100 + '%' );
  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  } @else {
    padding-top: $padding;
  }
}

###Triangle

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
  @include pseudo($pos: $position);
  width: 0;
  height: 0;
  @if $round {
    border-radius: 3px;
  }
  @if $direction == down {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    margin-top: 0 - round( $size / 2.5 );
  } @else if $direction == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    margin-bottom: 0 - round( $size / 2.5 );
  } @else if $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    margin-right: -$size;
  } @else if  $direction == left {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
    margin-left: -$size;
  }
}

###Media queries

$breakpoints: (
    "phone":        400px,
    "phone-wide":   480px,
    "phablet":      560px,
    "tablet-small": 640px,
    "tablet":       768px,
    "tablet-wide":  1024px,
    "desktop":      1248px,
    "desktop-wide": 1440px
);

@mixin mq($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

###Z-index

@function z($name) {
  @if index($z-indexes, $name) {
    @return (length($z-indexes) - index($z-indexes, $name)) + 1;
  } @else {
    @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
    @return null;
  }
}

$z-indexes: (
  "outdated-browser",
  "modal",
  "site-header",
  "page-wrapper",
  "site-footer"
);

###Hardware acceleration

@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    perspective: $perspective;
}

###Truncate ellipsis

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

###Hide, Visible, Screen readers

// Hide from both screenreaders and browsers

@mixin hidden {
	display: none;
	visibility: hidden;
}

@mixin visible($state: 'block') {
	display: unquote($state);
	visibility: visible;
}

// Hide only visually, but have it available for screenreaders
@mixin vh($focusable: false) {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;

	@if $focusable {
		@include vh-focusable;
	}
}

@mixin vh-reset {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

// Allow the element to be focusable when navigated to via the keyboard
@mixin vh-focusable {
	&:active,
	&:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
}

// Hide visually and from screenreaders, but maintain layout
@mixin invisible {
	visibility: hidden;
}

###Retina

@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3 / 2),
	only screen and (min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx) {
		@content;
	}
}

###Antialias

@mixin antialias {
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

###Appearance

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

###Unselectable

@mixin unselectable {
	-webkit-touch-callout: none;
	user-select: none;
}

Unclickable

@mixin unclickable {
    pointer-events: none;
}