Skip to content

Instantly share code, notes, and snippets.

@delphinpro
Last active June 23, 2016 09:09
Show Gist options
  • Save delphinpro/779fa0f93b6cfabf0bda867a7a96b894 to your computer and use it in GitHub Desktop.
Save delphinpro/779fa0f93b6cfabf0bda867a7a96b894 to your computer and use it in GitHub Desktop.
@import "_font.scss";
html {
font-size: percentage($_FONT_SIZE_ROOT / 16px);
}
.foo {
@include font(23px, 30px, bold);
}
// output:
html {
font-size: 81.25%;
}
.foo {
font-size: 23px;
font-size: 1.76923077rem;
line-height: 1.30434783em;
font-weight: bold;
}
$_FONT_SIZE_ROOT: 13px;
@function rem($px) {
@return ($px / $_FONT_SIZE_ROOT) * 1rem;
}
@function em($em) {
@return $em * 1em;
}
@mixin font($fontSize, $lineHeight: null, $fontWeight: null, $fontStyle: null, $fontFamily: null) {
@if ($fontFamily) {
font-family: $fontFamily;
}
font-size: $fontSize;
font-size: rem($fontSize);
@if ($lineHeight) {
line-height: em($lineHeight / $fontSize);
}
@if ($fontWeight) {
font-weight: $fontWeight;
}
@if ($fontStyle) {
font-style: $fontStyle;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment