Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Useful Sass Mixins
=font-family($family: "proxima-nova")
@if $family == "proxima-nova"
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif
@if $family == "freight-sans"
font-family: "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif
html
font-size: 62.5%
body
font-size: 1.4rem // 14px
h1
font-size: 2.4rem // 24px
html
font-size: 62.5%
body
+font-size(1.4)
h1
+font-size(2.4)
=font-size($size: 1.6, $line: $size * 1.25)
font-size: ($size * 10) + px
line-height: ($line * 10) + px
font-size: $size + rem
line-height: $line + rem
#menu
float: right
max-width: 640px
@include respond-to($tablet-portrait)
margin-right: 20px
@include respond-to($phone)
margin-right: 10px
$phone: '(max-width: 480px)'
$tablet-portrait: '(max-width: 767px)'
$tablet-landscape-desktop: '(min-width: 768px) and (max-width: 979px)'
$large-desktop: '(min-width: 1200px)'
$non-retina: 'screen and (-webkit-max-device-pixel-ratio: 1)'
$retina: 'screen and (-webkit-min-device-pixel-ratio: 2)'
=respond-to($media)
@media #{$media}
@content
=phone
@media (max-width: 480px)
@content
#logo
max-width: 320px
@include phone
/* The CSS below will be added to @content */
width: 120px
=hide-text()
font: 0/0 a
text-shadow: none
color: transparent
=mp0()
margin: 0
padding: 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.