sass mixins

_mixins.sass

=font-fallback($font)
	font-family: $font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

$xl-width: 1200px;
$lg-width: 992px;
$md-width: 768px;
$sm-width: 576px;

=xl
	@media (max-width: #{$xl-width - 1px})
		@content
=lg
	@media (max-width: #{$lg-width - 1px})
		@content
=md
	@media (max-width: #{$md-width - 1px})
		@content
=sm
	@media (max-width: #{$sm-width - 1px})
		@content

=min-xl
	@media (min-width: #{$xl-width})
		@content
=min-lg
	@media (min-width: #{$lg-width})
		@content
=min-md
	@media (min-width: #{$md-width})
		@content
=min-sm
	@media (min-width: #{$sm-width})
		@content

$browser-context: 14;

@function em($pixels, $context: $browser-context)
	@if (unitless($pixels))
		$pixels: $pixels * 1px;

	@if (unitless($context))
		$context: $context * 1px;

	@return $pixels / $context * 1em