Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Font size configuration with Sass (SCSS)
/* font size & line height in px */
$font-size-body-px: 14;
$line-height-px: 21;
/* calculate font-size (in %) and line-height (in em) */
$font-size-body: pc($font-size-body-px, 16);
$line-height: em($line-height-px, $font-size-body-px);
// Reset the global font size to the given value.
// Helpful if the font size should change at different responsive breakpoints.
//
// @param integer new global font size in px
// @return string new font size var and stylesheet for body
@mixin refont($px) {
$font-size-body-px: $px;
$font-size-body: $font-size-body-px / 16 * 100%;
body { font-size: $font-size-body; }
}
// Calculates em so it could be used everywhere.
//
// @param integer (font) size in pixel
// @param integer reference font-size in pixel
// @return string em
@function em($px: $line-height-px, $font-size: $font-size-body-px) {
@return $px / $font-size * 1em;
}
// Calculates rem so it could be used everywhere.
//
// @param integer font size in pixel
// @param integer reference size (for rem always font-size of body) in pixel
// @return string rem
@function rem($px: $line-height-px, $font-size: $font-size-body-px) {
@return $px / $font-size * 1rem;
}
// Calculates percent so it could be used everywhere.
//
// @param integer size in pixel
// @param integer reference size in pixel
// @return string em
@function pc($px: $line-height-px, $standard: $font-size-body-px) {
@return $px / $standard * 100%;
}
// Creates the font size in %
//
// @param integer font size in px
// @param integer font-size of parent element in px (if empty than it's the global font size)
// @return string css font-size with calculated % value
@mixin font-size($px, $standard: $font-size-body-px) {
font-size: pc($px,$standard);
}
// Creates the line height in em
//
// @param integer font size in pixel
// @param integer line-height in pixel
// @return string line height
@mixin line-height($line-height: $line-height-px, $font-size: $font-size-body-px) {
line-height: em($line-height, $font-size);
}
// typography dummy - example of how to use the Sass functions
//
// @author Michael Schulze
// @version 1.0
// @copyright Michael Schulze, 19 Juli, 2012
// @license MIT license
//
// @package sass
//
// @lastmodified $Date: 2012-07-19 13:19:13 +0200 (Do., 19 Jul 2012) $
@include "sizes";
@include "config";
@media all
{
body {
font-family: Arial, Helvetica, sans-serif;
font-size: $font-size-body;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h1 {
font-size: rem(28);
line-height: em(42);
}
big {
font-size: pc(16);
}
small {
font-size: em(12);
}
div.info {
font-size: pc(16);
}
/* You have to set a new reference when using pc() or em() */
div.info .description {
font-size: pc(12,16);
}
}
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.