Skip to content

Instantly share code, notes, and snippets.

@filipekiss
Last active December 18, 2015 06:08
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save filipekiss/5737359 to your computer and use it in GitHub Desktop.
Save filipekiss/5737359 to your computer and use it in GitHub Desktop.
A simple mixin to generate font-size rules using rem and a px fallback. Read more here: http://snook.ca/archives/html_and_css/font-size-with-rem and here http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
=size($property , $size, $size-right: false, $size-bottom: false, $size-left: false)
@if $size == $size-bottom and $size-right == $size-left //Check if we can discard size-bottom
$size-bottom: false
@if $size-right == $size-left //If horizontal sizes are equal we only need one of the properties
$size-left: false
@if $size and $size-right == false //All equal
#{$property}: $size * 1px
#{$property}: $size * 0.1rem
@if $size and $size-right != false and $size-bottom == false // Vertical and Horizontal
#{$property}: $size * 1px $size-right * 1px
#{$property}: $size * 0.1rem $size-right * 0.1rem
@if $size and $size-right != false and $size-bottom != false and $size-left == false //Different Verticals, Equal Horizontals
#{$property}: $size * 1px $size-right * 1px $size-bottom * 1px
#{$property}: $size * 0.1rem $size-right * 0.1rem $size-bottom * 0.1rem
@if $size and $size-right != false and $size-bottom != false and $size-left != false //All four different
#{$property}: $size * 1px $size-right * 1px $size-bottom * 1px $size-left * 1px
#{$property}: $size * 0.1rem $size-right * 0.1rem $size-bottom * 0.1rem $size-left * 0.1rem
=font-size($size)
+size('font-size' , $size)
=padding($size)
+size('padding' , $size)
html
font-size: 62.5% //This way, 1rem = 10px, making it easier to define my text-sizes through the document
.some-rule
+font-size(20) //20px or 2rem font-size
+size('padding' , 20) //20px / 2rem padding
+size('border' , 20, 10) //Vertical and Horizontal short borders
+size('margin' , 30, 40, 50, 60) //All four different values for margin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment