Skip to content

Instantly share code, notes, and snippets.

@andreypelykh
Created February 27, 2018 10:32
Show Gist options
  • Save andreypelykh/c446f85768649782b23841e6dda38a7d to your computer and use it in GitHub Desktop.
Save andreypelykh/c446f85768649782b23841e6dda38a7d to your computer and use it in GitHub Desktop.
sass mixins
=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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment