SCSS Reverse direction

There may be a point in your CSS coding that you want to know the opposite of a direction (e.g. up, down). This function allows you to pass it a direction and get the opposite back!‚Äč

Fairly basic principle. If it can't find the opposite it just returns what it was passed. Verbose function name so it don't conflict with anything else.

@function reverseDirection($direction) {
	$output: $direction;
	@if $direction == right {
		$output: left;
	} @else if $direction == left {
		$output: right;
	} @else if $direction == up {
		$output: down;
	} @else if $direction == down {
		$output: up;
	} @else {
		@debug 'Could not reverse #{$direction}';
	@return $output;
This website is currently having a full content audit - apologies if some of the code or content looks a bit funky!

View this post on Gitlab

You might also enjoy…

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.