Improve scss-addons

README.md

@@ -35,6 +35,7 @@ Feel free to start watching and ⭐ project in order not miss the release or upd
 * 🏭 [Views](#-views)
 * 🔦 [Debugging](#-debugging)
 * ⚙ [Helpers](#-helpers)
+* 🎨 [SCSS addons](#-scss-addons)
 * 🔌 [Integrations](#-integrations)
   * [Turbolinks integration](#turbolinks-integration)
   * [React.js integration](#reactjs-integration)
@@ -430,6 +431,12 @@ $someElement
   .each$(($element, index) => { $element.removeClass(`.jquery-too_${index}`); });
 ```
 
+## 🎨 SCSS addons
+
+Normas package includes additional scss-files that will help in styling your application.
+
+***To be continued...***
+
 ## 🔌 Integrations
 
 ### Turbolinks integration
@@ -501,11 +508,11 @@ Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔
 - More examples of usage with actual javascript plugins and libs
 - Improve code style and quality
 - Improve debugging
-- Upgrade to Babel 7
 - Optional jQuery usage
-- Example on node.js with Express.js
-- Use TypeScript
 - Tests
+- Upgrade to Babel 7
+- Use TypeScript
+- Example on node.js with Express.js
 
 ## 🤝 Contributing
 

src/scss/_font-face.scss

@@ -1,3 +1,5 @@
+// required typography
+
 @function font-source-declaration($font-family, $file-path, $file-formats, $base64: false) {
   $src: ();
   $formats-map: (

src/scss/_media.scss

@@ -0,0 +1,52 @@
+@mixin media($query) {
+  $media-query: 'screen';
+  $tick: false;
+  $prop: false;
+  @each $q in $query {
+    $tick: is-not($tick);
+    @if $tick {
+      $prop: $q;
+      $media-query: $media-query + " and (#{$q}:";
+    } @else {
+      @if $prop == max-width {
+        $q: $q - 1px;
+      }
+      $media-query: $media-query + " #{$q})";
+    }
+  }
+  @media #{$media-query} {
+    @content;
+  }
+}
+
+$_media-variant: false;
+$_media-args: false;
+$_media-first-arg: false;
+$_media-last-arg: false;
+
+@mixin media-variants($media-variants, $media-prop: max-width) {
+  $_media-first-arg: true !global;
+  $index: 0;
+  $length: length($media-variants);
+  @each $args in $media-variants {
+    $_media-args: $args !global;
+    $_media-variant: map-get($_media-args, variant) !global;
+    $index: $index + 1;
+    @if $index == $length {
+      $_media-last-arg: true !global;
+    }
+    @if $_media-variant == base {
+      @content;
+    } @else {
+      @include media($media-prop $_media-variant) {
+        @content;
+      }
+    }
+    @if $_media-first-arg {
+      $_media-first-arg: false !global;
+    }
+  }
+  $_media-last-arg: false !global;
+  $_media-variant: false !global;
+  $_media-args: false !global;
+}

src/scss/_sugar.scss

@@ -51,25 +51,22 @@
 }
 
 @mixin before($display: block, $content: '') {
-  &::before {
-    display: $display;
-    content: $content;
-    @content;
-  }
+  @include pseudo('&::before', $display, $content) { @content; }
 }
 
 @mixin after($display: block, $content: '') {
-  &::after {
-    display: $display;
-    content: $content;
-    @content;
-  }
+  @include pseudo('&::after', $display, $content) { @content; }
 }
 
 @mixin both($display: block, $content: '') {
-  &::before,
-  &::after {
-    display: $display;
+  @include pseudo('&::before, &::after', $display, $content) { @content; }
+}
+
+@mixin pseudo($selector, $display: block, $content: '') {
+  #{$selector} {
+    @if $display {
+      display: $display;
+    }
     content: $content;
     @content;
   }

src/scss/_typography.scss

@@ -3,28 +3,36 @@
     font-size: $font-size;
   }
   @if $line-height {
-    line-height: $line-height;
+    @if type-of($line-height) == number or index(inherit initial) {
+      line-height: $line-height;
+    } @else {
+      @include font-prop($line-height);
+    }
   }
   @each $arg in $args {
-    $arg-part: nth($arg, 1);
-    @if type-of($arg-part) == color {
-      color: $arg;
-    } @else if index(capitalize lowercase uppercase, $arg-part) {
-      text-transform: $arg;
-    } @else if index(center left right, $arg-part) {
-      text-align: $arg;
-    } @else if index(blink line-through overline underline, $arg-part) {
-      text-decoration: $arg;
-    } @else if index(pre pre-line pre-wrap nowrap, $arg-part) {
-      white-space: $arg;
+    @include font-prop($arg);
+  }
+}
+
+@mixin font-prop($arg) {
+  $arg-part: nth($arg, 1);
+  @if type-of($arg-part) == color {
+    color: $arg;
+  } @else if index(capitalize lowercase uppercase, $arg-part) {
+    text-transform: $arg;
+  } @else if index(center left right, $arg-part) {
+    text-align: $arg;
+  } @else if index(blink line-through overline underline, $arg-part) {
+    text-decoration: $arg;
+  } @else if index(pre pre-line pre-wrap nowrap, $arg-part) {
+    white-space: $arg;
+  } @else {
+    $normalized-font-weight: font-weight($arg-part);
+    @if $normalized-font-weight {
+      $arg: set-nth($arg, 1, $normalized-font-weight);
+      font-weight: $arg;
     } @else {
-      $normalized-font-weight: font-weight($arg-part);
-      @if $normalized-font-weight {
-        $arg: set-nth($arg, 1, $arg-part);
-        font-weight: $arg;
-      } @else {
-        @error 'Unknown argument in @mixin font(..., #{$arg-part}:#{type-of($arg-part)}, ..,)';
-      }
+      @error 'Unknown argument in @mixin font(..., #{$arg-part}:#{type-of($arg-part)}, ...)';
     }
   }
 }
@@ -38,19 +46,6 @@
   }
 }
 
-@mixin ellipsis($display: inline-block, $width: 100%) {
-  @if $display {
-    display: $display;
-  }
-  @if $width {
-    max-width: $width;
-  }
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-}
-
 @function font-weight($font-weight) {
   @if ($font-weight == 100 or $font-weight == thin or $font-weight == hairline) {
     @return 100;
@@ -73,3 +68,16 @@
   }
   @return false;
 }
+
+@mixin ellipsis($display: inline-block, $width: 100%) {
+  @if $display {
+    display: $display;
+  }
+  @if $width {
+    max-width: $width;
+  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}