From da77d25fb0fa2b0465c362b67a11560ab0bba1d5 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Mon, 8 Jan 2018 21:34:22 +0100 Subject: Combine selectors & extend documentation --- README.md | 17 ++++++++++++++--- package.json | 2 +- scss/_rfs.scss | 6 ++++-- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 5dfa7c1..9f9bcb0 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,9 @@ This input (SCSS): Will generate this (CSS): ```css -.title { +.title, +.disable-responsive-font-size .title, +.title.disable-responsive-font-size { font-size: 4rem; } @@ -124,7 +126,9 @@ By setting a second parameter to true, `!important` is added after the font-size CSS: ```css -.label { +.label, +.disable-responsive-font-size .label, +.label.disable-responsive-font-size { font-size: 2.5rem !important; } @@ -135,8 +139,15 @@ CSS: } ``` +## But this generates a lot of css? +True. But with gzip or other compression enabled, the difference in file size is barely noticeable due the high amount +of repetitive strings. If you really want to minimize the amount of generated css, setting +`$rfs-generate-disable-classes` to `false` can make a difference (and lowers the global specificity). + ## Known issues -Safari doesn't recalculate the value of vw in a calc()-function for font-sizes in iframes if the min-width, max-width or width is not set in vw after the iframe is resized (edge case, but this is the case for Codepen demo's). Adding this line will solve this (dirty fix): +Safari doesn't recalculate the value of vw in a calc()-function for font-sizes in iframes if the min-width, max-width or +width is not set in vw after the iframe is resized (edge case, but this is the case for Codepen demo's). Adding this +line will solve this (dirty fix): ```css _::-webkit-full-page-media, _:future, :root * {min-width: 0vw;} ``` diff --git a/package.json b/package.json index 0e9c036..8e441fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rfs", - "version": "7.0.1", + "version": "7.0.2", "description": "A scss-mixin for responsive font-sizes.", "main": "scss/_rfs.scss", "scripts": { diff --git a/scss/_rfs.scss b/scss/_rfs.scss index 4b7da11..96b8123 100644 --- a/scss/_rfs.scss +++ b/scss/_rfs.scss @@ -136,16 +136,18 @@ $enable-responsive-font-sizes: true !default; @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; } - font-size: $rfs-static; - @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}) { -- cgit v1.2.3