Skip to content

Instantly share code, notes, and snippets.

@calebgrove
Created December 16, 2013 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save calebgrove/7991648 to your computer and use it in GitHub Desktop.
Save calebgrove/7991648 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<p>This text should be 20px</p>
<div>This is unstyled text. If we set the body size to 62.5%, this would be 10px instead of 16px, which is fairly unusable.</div>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
//========= THE MIXIN =========//
@mixin font-size($sizeValue: 1.6) {
font-size: ($sizeValue * 10) + px;
font-size: ($sizeValue * 0.625) + rem;
}
//========= USAGE =========//
p {
@include font-size(2);
}
p {
font-size: 20px;
font-size: 1.25rem;
}
<p>This text should be 20px</p>
<div>This is unstyled text. If we set the body size to 62.5%, this would be 10px instead of 16px, which is fairly unusable.</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment