From 3b32ba77284148cf81f251253d76f51a7d13dc7e Mon Sep 17 00:00:00 2001 From: Martijn Date: Sun, 23 Jul 2017 17:27:45 +0200 Subject: !important-support, configuration in px possible --- package.json | 2 +- scss/_rfs.scss | 92 +++++++++++++++++++++++++++++++++++----------------------- 2 files changed, 57 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index fb2dd76..ab51e58 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rfs", - "version": "2.1.0", + "version": "3.0.0", "description": "A scss-mixin for responsive font-sizes.", "main": "scss/rfs.scss", "scripts": { diff --git a/scss/_rfs.scss b/scss/_rfs.scss index ae54390..a265e39 100644 --- a/scss/_rfs.scss +++ b/scss/_rfs.scss @@ -4,83 +4,103 @@ // // See https://github.com/MartijnCuppens/rfs. - // Configuration. // Minimum fontsize. -$rfs_minimum_font_size: 12 !default; -$rfs_minimum_font_size_unit: rem !default; +$rfs-minimum-font-size: 12px !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; +$rfs-breakpoint: 1200px !default; +$rfs-breakpoint-unit: px !default; // Factor of decrease. -$rfs_factor: 5 !default; +$rfs-factor: 5 !default; -// 1 rem = $rfs_rem_value px. -$rfs_rem_value: 16 !default; +// 1 rem = $rfs-rem-value px. +$rfs-rem-value: 16 !default; +// Remove px-unit from $rfs-minimum-font-size for calculations. +@if (unit($rfs-minimum-font-size) == 'px') { + $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1) +} + +// Remove px-unit from $rfs-breakpoint for calculations. +@if (unit($rfs-breakpoint) == 'px') { + $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1) +} // Responsive font-size mixin. +@mixin rfs($fs, $important: false) { + + $rfs-suffix: ''; + + // Add !important suffix if needed. + @if ($important) { + $rfs-suffix: ' !important'; + } -@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}; + @if type-of($fs) != 'number' or (not unitless($fs) and unit($fs) != 'px') or $fs == 0 { + font-size: #{$fs}#{$rfs-suffix}; } @else { + // Remove px-unit from $fs for calculations. + @if (unit($fs) == 'px') { + $fs: $fs / ($fs * 0 + 1) + } + // 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; + @if $rfs-minimum-font-size-unit == rem { + font-size: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; + } @else if $rfs-minimum-font-size-unit == px { + font-size: #{$fs}px#{$rfs-suffix}; } @else { - @error "`#{$rfs_minimum_font_size_unit}` is not a valid unit for $rfs_minimum_font_size_unit. Use `px` or `rem`."; + @error "`#{$rfs-minimum-font-size-unit}` is not a valid unit for $rfs-minimum-font-size-unit. Use `px` or `rem`."; } - @if $rfs_factor < 1 { - @error "`#{$rfs_factor}` is not a valid $rfs_factor, it must be greater or equal to 1."; + @if $rfs-factor < 1 { + @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater or equal to 1."; } // 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 { + // If $rfs-factor == 1, no rescaling will take place. + @if $fs > $rfs-minimum-font-size and $rfs-factor != 1 { // 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; + $mq-max-width: null; + $min-width: null; // Calculate minimum font-size for given font-size. - $fs_min: $rfs_minimum_font_size + ($fs - $rfs_minimum_font_size) / $rfs_factor; + $fs-min: $rfs-minimum-font-size + ($fs - $rfs-minimum-font-size) / $rfs-factor; // Calculate difference between given font-size and minimum font-size for given font-size. - $fs_diff: $fs - $fs_min; + $fs-diff: $fs - $fs-min; // 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; + @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`."; + @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; } // 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; + @if $rfs-minimum-font-size-unit == rem { + $min-width: #{$fs-min / $rfs-rem-value}rem; } @else { - $min_width: #{$fs_min}px; + $min-width: #{$fs-min}px; } - // Calculate the variable width between 0 and $rfs_breakpoint. - $variable_width: #{$fs_diff * 100 / $rfs_breakpoint}vw; + // Calculate the variable width between 0 and $rfs-breakpoint. + $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}vw; // Render the calculated font-size. - @media (max-width: #{$mq_max_width}) { - font-size: calc(#{$min_width} + #{$variable_width}); + @media (max-width: #{$mq-max-width}) { + font-size: calc(#{$min-width} + #{$variable-width})#{$rfs-suffix}; } } } -- cgit v1.2.3