diff options
author | MartijnCuppens <MartijnCuppens@users.noreply.github.com> | 2017-06-04 16:53:41 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-06-04 16:53:41 +0300 |
commit | dd5e960cdf2a867a86ec9c749a3b0e5f2ee113a4 (patch) | |
tree | a3d64c21ed5d8e72cfd2584c280b8ce4808a21fb | |
parent | 83eee94b6042b23bdf1a117afc168d309148dafd (diff) |
Create rfs.scss
-rw-r--r-- | scss/rfs.scss | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/scss/rfs.scss b/scss/rfs.scss new file mode 100644 index 0000000..0987f72 --- /dev/null +++ b/scss/rfs.scss @@ -0,0 +1,71 @@ +/////////////////// +// Configuration // +/////////////////// + +// Minimum fontsize. +$rfs_min_fs: 12; + +// Breakpoint at where font-size starts decreasing if screen-width is smaller. +$rfs_breakpoint: 1200; + +// Factor of decrease. +$rfs_factor: 5; + +// Use REM. +$rfs_use_rem: true; + + +/////////// +// Mixin // +/////////// + +// Make font size responsive. +@mixin rfs($fs) { + @if type-of($fs) != 'number' or not unitless($fs) { + @error "#{$fs} is not a number."; + } + + // Set default parameters + // Minimum fontsize. + $rfs_min_fs: 12 !default; + + // Breakpoint at where font-size starts decreasing if screenwidth is smaller. + $rfs_breakpoint: 1200 !default; + + // Factor of decrease. + $rfs_factor: 5 !default; + + // Use rem or px + $rfs_use_rem: true !default; + + // 1 rem = $rfs_rem_value px + $rfs_rem_value: 16 !default; + + // Default font-size. + @if $rfs_use_rem { + font-size: #{$fs / $rfs_rem_value}rem; + } @else { + font-size: #{$fs}px; + } + + // Only add media query if font-size is bigger as the minimum font-size. + @if $fs > $rfs_min_fs { + + // Calculate minimum font-size for given font-size. + $fs_min: $rfs_min_fs + ($fs - $rfs_min_fs) / $rfs_factor; + + // Calculate diffrence between given font-size and minimum font-size for given font-size. + $fs_diff: $fs - $fs_min; + + // The media-query + @if $rfs_use_rem { + @media (max-width: #{$rfs_breakpoint / $rfs_rem_value}rem) { + font-size: calc(#{$fs_min / $rfs_rem_value}rem + #{$fs_diff * 100 / $rfs_breakpoint}vw); + } + } @else { + @media (max-width: #{$rfs_breakpoint}px) { + font-size: calc(#{$fs_min}px + #{$fs_diff * 100 / $rfs_breakpoint}vw); + } + } + } +} |