From 96f1a75b689e015686bfa86160c7b5460917de7d Mon Sep 17 00:00:00 2001 From: Martijn Date: Wed, 12 Jul 2017 08:25:39 +0200 Subject: Move configuration outside mixin --- package.json | 2 +- scss/_rfs.scss | 40 +++++++++++++++++++++++----------------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 5dac4a3..fb2dd76 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rfs", - "version": "2.0.0", + "version": "2.1.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 d5d4350..ae54390 100644 --- a/scss/_rfs.scss +++ b/scss/_rfs.scss @@ -4,26 +4,32 @@ // // See https://github.com/MartijnCuppens/rfs. + +// Configuration. + +// 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; + +// Factor of decrease. +$rfs_factor: 5 !default; + +// 1 rem = $rfs_rem_value px. +$rfs_rem_value: 16 !default; + + +// Responsive font-size mixin. + @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 { - // 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; - - // Factor of decrease. - $rfs_factor: 5 !default; - - // 1 rem = $rfs_rem_value px. - $rfs_rem_value: 16 !default; - // Default font-size. @if $rfs_minimum_font_size_unit == rem { font-size: #{$fs / $rfs_rem_value}rem; @@ -52,7 +58,7 @@ // Calculate difference between given font-size and minimum font-size for given font-size. $fs_diff: $fs - $fs_min; - // RFS breakpoint formatting + // 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 { @@ -61,8 +67,8 @@ @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 + // 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 { -- cgit v1.2.3