From 784d3d7ba03a6dd4b844e604d3a5ebf29745b13c Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 25 Jan 2018 20:00:48 +0100 Subject: Add .sass variant --- package.json | 2 +- sass/_rfs.sass | 148 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+), 1 deletion(-) create mode 100644 sass/_rfs.sass diff --git a/package.json b/package.json index 664a7a7..f41f0ae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rfs", - "version": "7.0.3", + "version": "7.0.4", "description": "A scss-mixin for responsive font-sizes.", "main": "scss/_rfs.scss", "scripts": { diff --git a/sass/_rfs.sass b/sass/_rfs.sass new file mode 100644 index 0000000..9c05e49 --- /dev/null +++ b/sass/_rfs.sass @@ -0,0 +1,148 @@ +// stylelint-disable declaration-property-value-blacklist + +// RFS mixin. +// +// Automated font-resizing. +// +// See https://github.com/MartijnCuppens/rfs. + +// Configuration. + +// Minimum fontsize. +$rfs-minimum-font-size: 1rem !default +$rfs-font-size-unit: rem !default + +// Breakpoint at where font-size starts decreasing if screen width is smaller. +$rfs-breakpoint: 1200px !default +$rfs-breakpoint-unit: px !default + +// Resize font-size based on screen height and width. +$rfs-two-dimensional: false !default + +// Factor of decrease. +$rfs-factor: 5 !default + +// Generate disable classes +$rfs-generate-disable-classes: true !default + +// 1 rem = $rfs-rem-value px. +$rfs-rem-value: 16 !default + +// Disable RFS by setting $enable-responsive-font-sizes to false. +$enable-responsive-font-sizes: true !default + +@if $enable-responsive-font-sizes == false + // If $rfs-factor is set to 1, fluid font-resizing is disabled. + $rfs-factor: 1 + +// 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) +@else if unit($rfs-minimum-font-size) == "rem" + $rfs-minimum-font-size: $rfs-minimum-font-size / ($rfs-minimum-font-size * 0 + 1 / $rfs-rem-value) + +// Remove unit from $rfs-breakpoint for calculations. +@if unit($rfs-breakpoint) == "px" + $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1) +@else if unit($rfs-breakpoint) == "rem" or unit($rfs-breakpoint) == "em" + $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value) + +// Responsive font-size mixin. +=rfs($fs, $important: false) + $rfs-suffix: "" + + // Add !important suffix if needed. + @if $important + $rfs-suffix: " !important" + + // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value. + @if type-of($fs) != "number" or not unitless($fs) and unit($fs) != "px" and unit($fs) != "rem" or $fs == 0 + font-size: #{$fs}#{$rfs-suffix} + @else + // Variables for storing static and fluid rescaling. + $rfs-static: null + $rfs-fluid: null + + // Remove px-unit from $fs for calculations. + @if unit($fs) == "px" + $fs: $fs / ($fs * 0 + 1) + @else if unit($fs) == "rem" + $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value) + + // Set default font-size. + @if $rfs-font-size-unit == rem + $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix} + @else if $rfs-font-size-unit == px + $rfs-static: #{$fs}px#{$rfs-suffix} + @else + @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`." + + @if type-of($rfs-factor) != "number" or $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 + $min-width: null + $variable-unit: null + + // Calculate minimum font-size for given font-size. + $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 + + // Minimum font-size formatting. + // No need to check if the unit is valid, because we did that before. + @if $rfs-font-size-unit == rem + $min-width: #{$fs-min / $rfs-rem-value}rem + @else + $min-width: #{$fs-min}px + + // If two-dimensional, use smallest of screen width and height. + @if $rfs-two-dimensional + $variable-unit: vmin + @else + $variable-unit: vw + + // Calculate the variable width between 0 and $rfs-breakpoint. + $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit} + + // Set the calculated font-size. + $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix} + + // Rendering. + @if $rfs-fluid == null + // Only render static font-size if no fluid font-size is available. + font-size: $rfs-static + @else + $mq-value: null + + // RFS breakpoint formatting. + @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem + $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit} + @else if $rfs-breakpoint-unit == px + $mq-value: #{$rfs-breakpoint}px + @else + @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`." + + @if $rfs-generate-disable-classes + // Adding an extra class increases specificity, + // which prevents the media query to override the font size + &, + .disable-responsive-font-size &, + &.disable-responsive-font-size + font-size: $rfs-static + @else + font-size: $rfs-static + + @if $rfs-two-dimensional + @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) + font-size: $rfs-fluid + @else + @media (max-width: #{$mq-value}) + font-size: $rfs-fluid + +// The responsive-font-size mixin uses RFS to rescale font sizes. +=responsive-font-size($fs, $important: false) + +rfs($fs, $important) -- cgit v1.2.3