diff options
author | Martijn <martijn.cuppens@intracto.com> | 2017-07-12 09:25:39 +0300 |
---|---|---|
committer | Martijn <martijn.cuppens@intracto.com> | 2017-07-12 09:25:39 +0300 |
commit | 96f1a75b689e015686bfa86160c7b5460917de7d (patch) | |
tree | 1cce8b75d00770cab36f5650aa3495b725eb66f4 | |
parent | 179f021fb2e662bd7709071d265d3fad4b295809 (diff) |
Move configuration outside mixinv2.1.0
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | 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 { |