Last active
December 19, 2015 04:59
-
-
Save polarblau/5901522 to your computer and use it in GitHub Desktop.
Simple Sass helper for baseline grid value calculations.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// set base font size if not set | |
// normalize.css standard value | |
$base-font-size: 16px !default | |
// define scope font size to make it available globally | |
$__scope: $base-font-size | |
@function relative($arguments) | |
// ensure that the scope size is set | |
$__scope: $base-font-size !default | |
// prepare empty list for output | |
$converted: () | |
// convert arguments to list | |
$params: ($arguments) | |
// iterate over arguments and convert | |
// via scope if arguments is a pixel value | |
@each $param in $params | |
@if type-of($param) == 'number' and unit($param) == 'px' | |
$converted: append($converted, em($param, $__scope)) | |
@else | |
$converted: append($converted, $param) | |
// return the converted list | |
@return $converted | |
=with-font-size($value: $base-font-size, $base: $base-font-size) | |
// set scope font size | |
$__scope: $value | |
// convert font-size relative to base font size | |
font-size: em($value, $base) | |
// yield to block | |
@content | |
// reset scope font size | |
$__scope: $base-font-size |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$base-font-size: 16px | |
@import "baseline" | |
#selector | |
+with-font-size(20px) | |
margin: relative(10px 20px) | |
line-height: relative(20px) | |
// Output: | |
#selector { | |
font-size: 0.75em; | |
margin: 0.83333em 1.66667em; | |
line-height: 1.66667em; } |
Nested example after adding the optional base argument:
#outer
+with-font-size(10px)
line-height: relative(15px)
#inner
+with-font-size(20px, 10px) // pass parent font size as base value
line-height: relative(15px)
#outer {
font-size: 0.625em;
line-height: 1.5em; }
#outer #inner {
font-size: 2em;
line-height: 0.75em; }
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
One of the issues is currently nested definitions. An option could be to pass the base font as second argument.