diff options
author | Martijn <martijn.cuppens@intracto.com> | 2017-06-24 18:29:39 +0300 |
---|---|---|
committer | Martijn <martijn.cuppens@intracto.com> | 2017-06-24 18:29:39 +0300 |
commit | de98a6cb358833f9fe5e5b2671a54c955baccfbc (patch) | |
tree | 0af7fce62058d4847dadf519711c84f152bc4d2c | |
parent | 41ee844f08849340b1802e8bf2081a01a82c4d3a (diff) |
Debug messages and support for multiple units
- px-units by default for media queries
- possible to choose between rem, em or px units for media queries
- Custom error messages if configuration variables are used wrong
- Remove configuration from file which allows altering them elsewhere
- Prints the passed value if it's not a number (in case of inherit or numbers with units)
- Better comments
-rw-r--r-- | scss/rfs.scss | 114 |
1 files changed, 62 insertions, 52 deletions
diff --git a/scss/rfs.scss b/scss/rfs.scss index 0987f72..d5d4350 100644 --- a/scss/rfs.scss +++ b/scss/rfs.scss @@ -1,70 +1,80 @@ -/////////////////// -// Configuration // -/////////////////// +// RFS mixin. +// +// Automated font-resizing. +// +// See https://github.com/MartijnCuppens/rfs. -// 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; +@mixin rfs($fs) { + // If $fs is not a number (like inherit) or $fs has a unit (like 1.5em) or $ is 0, just print the value. + @if type-of($fs) != 'number' or not unitless($fs) or $fs == 0 { + font-size: #{$fs}; + } @else { -// Use REM. -$rfs_use_rem: true; + // Minimum fontsize. + $rfs_minimum_font_size: 12 !default; + $rfs_minimum_font_size_unit: rem !default; + // Breakpoint at where font-size starts decreasing if screen width is smaller. + $rfs_breakpoint: 1200 !default; + $rfs_breakpoint_unit: px !default; -/////////// -// Mixin // -/////////// + // Factor of decrease. + $rfs_factor: 5 !default; -// Make font size responsive. -@mixin rfs($fs) { - @if type-of($fs) != 'number' or not unitless($fs) { - @error "#{$fs} is not a number."; - } + // 1 rem = $rfs_rem_value px. + $rfs_rem_value: 16 !default; - // Set default parameters - // Minimum fontsize. - $rfs_min_fs: 12 !default; + // Default font-size. + @if $rfs_minimum_font_size_unit == rem { + font-size: #{$fs / $rfs_rem_value}rem; + } @else if $rfs_minimum_font_size_unit == px { + font-size: #{$fs}px; + } @else { + @error "`#{$rfs_minimum_font_size_unit}` is not a valid unit for $rfs_minimum_font_size_unit. Use `px` or `rem`."; + } - // Breakpoint at where font-size starts decreasing if screenwidth is smaller. - $rfs_breakpoint: 1200 !default; + @if $rfs_factor < 1 { + @error "`#{$rfs_factor}` is not a valid $rfs_factor, it must be greater or equal to 1."; + } - // Factor of decrease. - $rfs_factor: 5 !default; + // Only add media query if font-size is bigger as the minimum font-size. + // If $rfs_factor == 1, no rescaling will take place. + @if $fs > $rfs_minimum_font_size and $rfs_factor != 1 { - // Use rem or px - $rfs_use_rem: true !default; + // These variables must be defined outside of the if-else-construction. + // see https://stackoverflow.com/questions/15371332/sass-ignores-variables-defined-in-if-statement. + $mq_max_width: null; + $min_width: null; - // 1 rem = $rfs_rem_value px - $rfs_rem_value: 16 !default; + // Calculate minimum font-size for given font-size. + $fs_min: $rfs_minimum_font_size + ($fs - $rfs_minimum_font_size) / $rfs_factor; - // Default font-size. - @if $rfs_use_rem { - font-size: #{$fs / $rfs_rem_value}rem; - } @else { - font-size: #{$fs}px; - } + // Calculate difference between given font-size and minimum font-size for given font-size. + $fs_diff: $fs - $fs_min; - // Only add media query if font-size is bigger as the minimum font-size. - @if $fs > $rfs_min_fs { + // RFS breakpoint formatting + @if $rfs_breakpoint_unit == em or $rfs_breakpoint_unit == rem{ + $mq_max_width: #{$rfs_breakpoint / $rfs_rem_value}#{$rfs_breakpoint_unit}; + } @else if $rfs_breakpoint_unit == px { + $mq_max_width: #{$rfs_breakpoint}px; + } @else { + @error "`#{$rfs_breakpoint_unit}` is not a valid unit for $rfs_breakpoint_unit. Use `px`, `em` or `rem`."; + } - // Calculate minimum font-size for given font-size. - $fs_min: $rfs_min_fs + ($fs - $rfs_min_fs) / $rfs_factor; + // Minimum font-size formatting + // No need to check if the unit is valid, because we did that before + @if $rfs_minimum_font_size_unit == rem { + $min_width: #{$fs_min / $rfs_rem_value}rem; + } @else { + $min_width: #{$fs_min}px; + } - // Calculate diffrence between given font-size and minimum font-size for given font-size. - $fs_diff: $fs - $fs_min; + // Calculate the variable width between 0 and $rfs_breakpoint. + $variable_width: #{$fs_diff * 100 / $rfs_breakpoint}vw; - // 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); + // Render the calculated font-size. + @media (max-width: #{$mq_max_width}) { + font-size: calc(#{$min_width} + #{$variable_width}); } } } |