diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e29b8a9..39093106 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/bower.json b/bower.json index 093099c7..ebef567f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jeet", - "version": "6.0.0", + "version": "6.1.0", "homepage": "http://jeet.gs", "authors": [ "Cory Simmons ", diff --git a/package.json b/package.json index 7ae7fe98..2dc03fd8 100644 --- a/package.json +++ b/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", diff --git a/scss/jeet/_grid.scss b/scss/jeet/_grid.scss index 2881e5f2..3074e444 100644 --- a/scss/jeet/_grid.scss +++ b/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); + } } } diff --git a/stylus/jeet/_grid.styl b/stylus/jeet/_grid.styl index 98840e7f..078d6322 100644 --- a/stylus/jeet/_grid.styl +++ b/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(). diff --git a/tests/functions/edit/edit.scss b/tests/functions/edit/edit.scss index bf6da0de..8cb08048 100644 --- a/tests/functions/edit/edit.scss +++ b/tests/functions/edit/edit.scss @@ -1,3 +1,5 @@ @import 'scss/jeet/index'; @include edit(blue); + +@include edit(blue, $important: true); diff --git a/tests/functions/edit/edit.styl b/tests/functions/edit/edit.styl index 4bb0a6ba..9819eb80 100644 --- a/tests/functions/edit/edit.styl +++ b/tests/functions/edit/edit.styl @@ -1,3 +1,5 @@ @import 'stylus/jeet/index' edit(blue) + +edit(blue, important: true)