Support for every property (#144)

- Support for all properties
- Shorthand mixins for margins and paddings
- Support for custom properties
- Clearer way to declare `!important` rules: `@include rfs(1rem !important)` instead of `@include rfs(1rem, true)`
- Switched to mobile first approach, still possible to switch to the `max-width` media queries if needed
- Configuration variables are changed:
	- Base font size -> Base value
	- Font size unit -> Unit
- `responsive-font-size` property changed to `rfs()` function (see https://github.com/twbs/rfs/issues/116)
- Dropped `responsive-font-size` mixins
- Dropped Less 2 support since we had to work with lists
- Prevent generation of `/test/expected/main.css`
- Additional tests for new implementations
- Cleanup npm scripts examples
- Code examples in `README.md` are grouped by processor and collapsed

1 files changed, 210 insertions, 30 deletions

diff --git a/test/expected/test-7.css b/test/expected/test-7.css
index 3b26cb8..194b0cf 100644
--- a/test/expected/test-7.css
+++ b/test/expected/test-7.css
@@ -1,50 +1,230 @@
 .selector-1 {
   background-color: #f00;
   width: 300px;
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-1 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  font-size: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-1 {
+    font-size: 32px;
+  }
+}
 
 .selector-2 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-2 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  font-size: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-2 {
+    font-size: 32px;
+  }
+}
 
 .selector-3 {
-  font-size: 32px !important; }
-  @media (max-width: 1200px) {
-    .selector-3 {
-      font-size: calc(21.2px + 0.9vw)  !important; } }
+  font-size: calc(21.2px + 0.9vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-3 {
+    font-size: 32px !important;
+  }
+}
 
 .selector-4 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-4 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  font-size: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-4 {
+    font-size: 32px;
+  }
+}
 
 .selector-5 {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .selector-6 {
-  font-size: inherit; }
+  font-size: inherit;
+}
 
 @supports (display: flex) {
   .selector-7 {
-    font-size: 28px; }
-    @media (max-width: 1200px) {
-      .selector-7 {
-        font-size: calc(20.8px + 0.6vw) ; } } }
+    font-size: calc(20.8px + 0.6vw);
+  }
+  @media (min-width: 1200px) {
+    .selector-7 {
+      font-size: 28px;
+    }
+  }
+}
 
 .selector-8 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-8 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  flex: 0 999 calc(69.2px + 36.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-8 {
+    flex: 0 999 512px;
+  }
+}
 
 .selector-9 {
-  font-size: 32px; }
-  @media (max-width: 1200px) {
-    .selector-9 {
-      font-size: calc(21.2px + 0.9vw) ; } }
+  padding: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-9 {
+    padding: 32px;
+  }
+}
+
+.selector-10 {
+  padding: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-10 {
+    padding: 32px;
+  }
+}
+
+.selector-11 {
+  padding-top: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-11 {
+    padding-top: 32px;
+  }
+}
+
+.selector-12 {
+  padding-right: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-12 {
+    padding-right: 32px;
+  }
+}
+
+.selector-13 {
+  padding-bottom: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-13 {
+    padding-bottom: 32px;
+  }
+}
+
+.selector-14 {
+  padding-left: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-14 {
+    padding-left: 32px;
+  }
+}
+
+.selector-15 {
+  margin: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-15 {
+    margin: 32px;
+  }
+}
+
+.selector-16 {
+  margin-top: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-16 {
+    margin-top: 32px;
+  }
+}
+
+.selector-17 {
+  margin-right: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-17 {
+    margin-right: 32px;
+  }
+}
+
+.selector-18 {
+  margin-bottom: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-18 {
+    margin-bottom: 32px;
+  }
+}
+
+.selector-19 {
+  margin-left: calc(21.2px + 0.9vw);
+}
+@media (min-width: 1200px) {
+  .selector-19 {
+    margin-left: 32px;
+  }
+}
+
+.selector-20 {
+  margin: calc(21.2px + 0.9vw) calc(22.8px + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-20 {
+    margin: 32px 48px;
+  }
+}
+
+.selector-21 {
+  margin: calc(21.2px + 0.9vw) calc(22.8px + 2.1vw) !important;
+}
+@media (min-width: 1200px) {
+  .selector-21 {
+    margin: 32px 48px !important;
+  }
+}
+
+.selector-22 {
+  font-size: 0;
+}
+
+.selector-23 {
+  margin: 0 calc(22.8px + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-23 {
+    margin: 0 48px;
+  }
+}
+
+.selector-24 {
+  box-shadow: 0 0 calc(21.2px + 0.9vw) #f00, 0 0 calc(22.8px + 2.1vw) #0f0;
+}
+@media (min-width: 1200px) {
+  .selector-24 {
+    box-shadow: 0 0 32px #f00, 0 0 48px #0f0;
+  }
+}
+
+.selector-25 {
+  --value: calc(22.8px + 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-25 {
+    --value: 48px;
+  }
+}
+
+.selector-26 {
+  font-size: 10px;
+}
+
+.selector-27 {
+  margin: calc(-22.8px - 2.1vw);
+}
+@media (min-width: 1200px) {
+  .selector-27 {
+    margin: -48px;
+  }
+}
+
+.selector-28 {
+  margin: -8px;
+}