Combine selectors & extend documentationv7.0.2

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}) {