Add debug mode

README.md

@@ -19,6 +19,7 @@ Double Dash is a SCSS library helping to declare [custom media queries](docs/cus
     - [Introduction](#introduction)
     - [Available mixins](#available-mixins)
 - [Partial import](#partial-import)
+- [Debug](#debug)
 
 ## Installation
 
@@ -177,7 +178,7 @@ Available files: `color`, `js`, `light`, `motion`, `pointer`, `ratio`, `refresh`
 
 ### Import mixins for ranged media queries
 
-First, import the generic `--media` mixins: the other mixins use it:
+First, import the generic `--media` mixins (the other mixins use it):
 
 ```scss
 @import '~double-dash.scss/src/mixins/base';
@@ -190,3 +191,12 @@ Then, pulls the mixins for viewport sizes custom media queries:
 ```
 
 Available files: `ratio`, `resolution`, `sizes`.
+
+## Debug
+
+You can output each custom media query generated with Double Dash in your CLI by setting the `$dash-dash-debug` variable before importing Double Dash.
+
+```scss
+$dash-dash-debug: true;
+@import '~double-dash.scss';
+```

src/mixins/_base.scss

@@ -1,3 +1,5 @@
+@import 'debug';
+
 /*
  * MEDIA MIXIN
  *
@@ -27,7 +29,10 @@
   }
 
   @custom-media --#{$name} #{$features};
-  // @debug --#{$name} unquote('#{$features}'); // Uncomment for console debug.
+
+  @if $dash-dash-should-debug {
+    @debug unquote('@custom-media ') --#{$name} unquote('#{$features}');
+  }
 }
 
 /* --media() ALIAS */

src/mixins/_debug.scss

@@ -0,0 +1,5 @@
+$dash-dash-should-debug: false;
+
+@if variable-exists('dash-dash-debug') == true and $dash-dash-debug == true {
+  $dash-dash-should-debug: true;
+}