Some of my go-to sass mixins/functions. #prettycool.

sass-utils.scss

/// Screen breakpoints for media queries
$breakpoints: (
	'medium': 40em,
	'large':  64em,
	'xlarge': 75em,
	'xxlarge': 90em
) !default;

/// Mixin to manage responsive breakpoints
/// @link https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin mq($breakpoint) {
	// If the key exists in the map
	@if map-has-key( $breakpoints, $breakpoint ) {
		// Prints a media query based on the value
		@media ( min-width: map-get( $breakpoints, $breakpoint ) ) {
			@content;
		}
	}
	// If the key doesn't exist in the map
	@else {
		@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
	}
}

// Block center content
@mixin center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

// Apply clearfix
@mixin clearfix {
	&:after {
		content: "";
		display: table;
		table-layout: fixed;
	}
}

// Good for when you want to use responsive divs as images
@mixin thumb_bg( $size: cover, $position: center, $repeat: no-repeat ) {
	background-size: $size;
	background-position: $position;
	background-repeat: $repeat;
}

// #prettyycool
@mixin responsive_shape( $width: 100%, $ratio: 100%, $content-padding: 0 ) {
	position: relative;
	width: $width;
	&:after {
		content: "";
		display: block;
		padding-bottom: $ratio; // Change this value to affect the aspect ratio of the shape. 100% = a square!
	}
}

// Screen reader text
@mixin srt {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

@mixin print_style {
	@media print { @content ; }
}

// Quick link hover styles to include hover & focus
@mixin link_hover {
	&:hover,
	&:focus {
		@content ;
	}
}

// Heading mixin where all heading styles are setup!
// This allows you to keep overrides consistent with your base styles and keeps things DRY!
@mixin heading( $lvl: h2, $color: $dark-blue ) {
	
	// Universal heading styles
	color: $color;
	font-family: $sans;

	@if $lvl == h1 {
		font-size: 24px;
		letter-spacing: 2px;
		line-height: 1.125;
		font-weight: 300;
		margin-bottom: 0.33em;

		@include mq(medium) {
			font-size: 44px;
		}

		@include mq(large) {
			font-size: 64px;
		}

	} @else if $lvl == h2 {
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 3px;
		line-height: 1.1875;
		font-weight: 500;
		margin-bottom: 0.25em;

		@include breakpoint(medium) {
			font-size: 32px;
		}

	} @else if $lvl == h3 {
		font-size: 19px;
		text-transform: uppercase;
		line-height: 1.25;
		letter-spacing: 1px;
		font-weight: 700;
		margin-bottom: 0.375em;

		@include breakpoint(medium) {
			font-size: 20px;
		}

	} @else if $lvl == h4 {
		font-size: 17px;
		line-height: 1.25;
		letter-spacing: 0;
		font-weight: 700;
		margin-bottom: 0.425em;

		@include breakpoint(medium) {
			font-size: 24px;
		}

	} @else if $lvl == h5 {
		font-size: 14px;
		text-transform: uppercase;
		line-height: 1.25;
		letter-spacing: 0.5px;
		font-weight: 700;
		margin-bottom: 0.625em;
	}
}

/// Convert unit values to rem
$base-font-size: 16px !default;
$rem-fallback: false !default;
$rem-px-only: false !default;

@function rem-separator( $list, $separator: false ) {
	@if $separator == "comma" or $separator == "space" {
		@return append( $list, null, $separator );
	}
	@if function-exists( "list-separator" ) == true {
		@return list-separator( $list );
	} // list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
	
	$test-list: ();
	@each $item in $list {
		$test-list: append( $test-list, $item, space );
	}
	@return if ( $test-list == $list, space, comma );
}
@mixin rem-baseline( $zoom: 100% ) {
	font-size: $zoom / 16px * $base-font-size;
}

@function rem-convert( $to, $values... ) {
	$result: ();
	$separator: rem-separator( $values );
	@each $value in $values {
		$value: if( unitless( $value ), $value * 1px, $value );
		@if type-of( $value ) == "number" and unit( $value ) == "rem" and $to == "px" {
			$result: append( $result, $value / 1rem * $base-font-size, $separator );
		} @else if type-of( $value ) == "number" and unit( $value ) == "px" and $to == "rem" {
			$result: append( $result, $value / $base-font-size * 1rem, $separator );
		} @else if type-of( $value ) == "list" {
			$value-separator: rem-separator( $value );
			$value: rem-convert( $to, $value... );
			$value: rem-separator( $value, $value-separator );
			$result: append( $result, $value, $separator );
		} @else {
			$result: append( $result, $value, $separator );
		}
	}
	@return if( length( $result ) == 1, nth( $result, 1 ), $result );
}

@function rem( $values... ) {
	@if $rem-px-only {
		@return rem-convert( px, $values... );
	} @else {
		@return rem-convert( rem, $values... );
	}
}

@mixin rem( $properties, $values... ) {
	@if type-of( $properties ) == "map" {
		@each $property in map-keys( $properties ) {
			@include rem( $property, map-get( $properties, $property ) );
		}
	} @else {
		@each $property in $properties {
			@if $rem-fallback or $rem-px-only {
				#{$property}: rem-convert( px, $values... );
			}
			@if not $rem-px-only {
				#{$property}: rem-convert( rem, $values... );
			}
		}
	}
}