_utilities.scss

@mixin mq($point) {
	@if $point == xsmall-up {
		@media (min-width: 420px) { @content; }
	}
	@else if $point == small-up {
		@media (min-width: 768px) { @content; }
	}
	@else if $point == medium-up {
		@media (min-width: 1024px) { @content; }
	}
	@else if $point == large-up {
		@media (min-width: 1200px) { @content; }
	}
	@else if $point == xlarge-up {
		@media (min-width: 1441px) { @content; }
	}
	@else if $point == xxlarge-up {
		@media (min-width: 1600px) { @content; }
	}
}

%clearfix {
	&:after {
		content: " ";
		display: block;
		clear: both;
	}
}

%visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

e.g.

margin: 20px;
@include mq(large-up) { 
    margin: 40px;
}