Merge pull request #352 from clear-y/jc/add-important-param

Add important parameter to the edit() mixin

Author: corysimmons

CHANGELOG.md

@@ -1,3 +1,9 @@
+
+### 6.1.0
+- Enhancements
+ - Add `important` parameter to `edit()` mixin
+   - Defaults to `false`. When set to `true` it adds the `!important` flag to the CSS to force elements with backgrounds already set to show the debug grid. 
+
 ### 6.0.0
 - Enhancements
   - Scss and Stylus version now output identical CSS

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jeet",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "homepage": "http://jeet.gs",
   "authors": [
     "Cory Simmons <csimmonswork@gmail.com>",

package.json

@@ -18,7 +18,7 @@
     }
   ],
   "main": "stylus/jeet.js",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A grid system for humans.",
   "keywords": [
     "stylus",

scss/jeet/_grid.scss

@@ -190,10 +190,17 @@
 /**
  * View the grid and its layers for easy debugging.
  * @param {string} [$color=black] - The background tint applied.
+ * @param {boolean} [$important=false] - Whether to apply the style as !important.
  */
-@mixin edit($color: black) {
-  * {
-    background: rgba($color, .05);
+@mixin edit($color: black, $important: false) {
+  @if $important {
+    * {
+      background: rgba($color, .05) !important;
+    }
+  } @else {
+    * {
+      background: rgba($color, .05);
+    }
   }
 }
 

stylus/jeet/_grid.styl

@@ -150,10 +150,15 @@ unshift()
 /**
  * View the grid and its layers for easy debugging.
  * @param {string} [color=black] - The background tint applied.
+ * @param {boolean} [important=false] - Whether to apply the style as !important.
  */
-edit(color = black)
-  *
-    background: rgba(color, 5%)
+edit(color = black, important = false)
+  if important
+    *
+      background: rgba(color, 5%) !important
+  else
+    *
+      background: rgba(color, 5%)
 
 /**
  *  Alias for edit().

tests/functions/edit/edit.scss

@@ -1,3 +1,5 @@
 @import 'scss/jeet/index';
 
 @include edit(blue);
+
+@include edit(blue, $important: true);

tests/functions/edit/edit.styl

@@ -1,3 +1,5 @@
 @import 'stylus/jeet/index'
 
 edit(blue)
+
+edit(blue, important: true)