From b82f399e27a35b969208964e8a9412273d045fa2 Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Fri, 18 Jul 2014 23:28:59 +0200 Subject: [PATCH 1/9] Remove obsolete Code --- stylesheets/_jacket.scss | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index 09e2503..842c46c 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -15,24 +15,18 @@ // Default list of jacket contexts. $jacket: null !default; -// Private variable used by jacket-context(). -$jckt-context: null; - /////////////////////////////////////////////////////////// // Jacket mixin // Takes a list of jacket contexts. // Outputs a block of styles if a context is set. /////////////////////////////////////////////////////////// @mixin jacket($contexts...) { - + $naked: false; $selectors: (); $filtered: (); $selector-string: ''; - // Set the global context variable. - $jckt-context: $contexts !global; - // If jacket is a single context and selector list, encapsulate. @if list-separator($jacket) == 'space' { $jacket: $jacket, null !global; @@ -101,12 +95,3 @@ $jckt-context: null; // will not be printed. @return null; } - -/////////////////////////////////////////////////////////// -// Jacket Context function -// Takes a jacket context value. Use when code inside a jacket -// needs to know if a specific jacket context is set. -/////////////////////////////////////////////////////////// -@function jacket-context($context) { - @return if(index($jckt-context, $context), true, false); -} From c6d186e5f6f583fb50654ef2784949fd44614f60 Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Fri, 18 Jul 2014 23:33:07 +0200 Subject: [PATCH 2/9] Add Check against null Values in context, so that there is no accidential match because we add a null value to the Jacket list in certain cases. --- stylesheets/_jacket.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index 842c46c..c5e74d8 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -35,7 +35,7 @@ $jacket: null !default; // Test if a jacket context and jacket value match. @each $item in $jacket { @each $context in $contexts { - @if index($context, nth($item, 1)) { + @if index($context, nth($item, 1)) and not ($context == null) { // Gather wrapping selectors. @if length($item) == 1 { From e5cc415a4af283b0415ab52d914ec2cedf5414d7 Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Fri, 18 Jul 2014 23:35:33 +0200 Subject: [PATCH 3/9] Do something against the Deprication Warning: "The return value of index() will change from "false" to "null" in future versions of Sass. For compatibility, avoid using "== false" on the return value. For example, instead of "@if index(...) == false", just write "@if not index(...)". --- stylesheets/_jacket.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index c5e74d8..73e6159 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -51,7 +51,7 @@ $jacket: null !default; // Filter out duplicate selectors. // If reject() is added to Sass we can remove the $filtered holder variable. @each $selector in $selectors { - @if index($filtered, $selector) == false { + @if not index($filtered, $selector) { $filtered: append($filtered, $selector); } } From 0fcddf759e1e4136da9993494af0c471b687cf7c Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Sat, 19 Jul 2014 10:22:42 +0200 Subject: [PATCH 4/9] Remove redundancy in code checking for matching Contexts in the Jacket Variable to prevent mistakes. The Check "If jacket is a single context and selector list, encapsulate." was only done in the Mixin but not in the Function. --- stylesheets/_jacket.scss | 56 +++++++++++++++++++++++++++------------- 1 file changed, 38 insertions(+), 18 deletions(-) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index 73e6159..d2027be 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -21,6 +21,34 @@ $jacket: null !default; // Outputs a block of styles if a context is set. /////////////////////////////////////////////////////////// @mixin jacket($contexts...) { + $matchResult: jacketMatch($contexts); + $naked: nth($matchResult, 1); + $selector-string: nth($matchResult, 2); + + // If the weather is right, output that jacketed code! + @if $naked { + @content; + } + @if $selector-string != '' { + #{$selector-string} { + @content; + } + } + + // there is bad weather down here don't output nothing +} + +/////////////////////////////////////////////////////////// +// jacketMatch function +// Takes a list of jacket contexts. +// Returns a list of two elements: +// first Element is true if there was at keast one context wothout a .wrapping-selector +// that matched against the $jacket variable. returns false otherwise +// Second element is a String of the resulting wrapping Selectors or an empty +// String '' if there was no context woth a .wrapping-selector +// that matched against the $jacket variable. +/////////////////////////////////////////////////////////// +@function jacketMatch($contexts...) { $naked: false; $selectors: (); @@ -64,34 +92,26 @@ $jacket: null !default; $selector-string: $selector-string + $selector; } - // If the weather is right, output that jacketed code! - @if $naked { - @content; - } - @if $selector-string != '' { - #{$selector-string} { - @content; - } - } + // return Result + @return $naked, $selector-string; } + /////////////////////////////////////////////////////////// // Jacket function // Takes a list of jacket contexts. // Outputs a value if a context is set. /////////////////////////////////////////////////////////// @function jacket($value, $contexts...) { - - @each $item in $jacket { - @each $context in $contexts { - @if index($context, nth($item, 1)) { - // If the weather is right, return the value! - @return $value; - } - } - } + $matchResult:jacketMatch($contexts); + @if ( nth($matchResult, 1) or (nth($matchResult, 2) != '')){ + // If the weather is right, return the value! + @return $value; + } // Else return null. If null is the only value for a selector, the selector // will not be printed. @return null; } + + From d058304c8bfc58638af97f61178f7c339b2b583d Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Sat, 19 Jul 2014 10:24:18 +0200 Subject: [PATCH 5/9] rename function from "jacketMatch" to "jacket-match" --- stylesheets/_jacket.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index d2027be..25d8cf7 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -21,7 +21,7 @@ $jacket: null !default; // Outputs a block of styles if a context is set. /////////////////////////////////////////////////////////// @mixin jacket($contexts...) { - $matchResult: jacketMatch($contexts); + $matchResult: jacket-match($contexts); $naked: nth($matchResult, 1); $selector-string: nth($matchResult, 2); @@ -39,7 +39,7 @@ $jacket: null !default; } /////////////////////////////////////////////////////////// -// jacketMatch function +// jacket-match function // Takes a list of jacket contexts. // Returns a list of two elements: // first Element is true if there was at keast one context wothout a .wrapping-selector @@ -48,7 +48,7 @@ $jacket: null !default; // String '' if there was no context woth a .wrapping-selector // that matched against the $jacket variable. /////////////////////////////////////////////////////////// -@function jacketMatch($contexts...) { +@function jacket-match($contexts...) { $naked: false; $selectors: (); @@ -103,7 +103,7 @@ $jacket: null !default; // Outputs a value if a context is set. /////////////////////////////////////////////////////////// @function jacket($value, $contexts...) { - $matchResult:jacketMatch($contexts); + $matchResult:jacket-match($contexts); @if ( nth($matchResult, 1) or (nth($matchResult, 2) != '')){ // If the weather is right, return the value! @return $value; @@ -113,5 +113,3 @@ $jacket: null !default; // will not be printed. @return null; } - - From 5e45c797a4b4a06348b4feb367fcee892848b01f Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Sat, 19 Jul 2014 10:29:44 +0200 Subject: [PATCH 6/9] new function jacket-add-contexts To add a context to an existing Jacket Variable was not easy to not destroy the consistency of the list. Therefor I created this function. --- stylesheets/_jacket.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index 25d8cf7..e581d94 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -113,3 +113,21 @@ $jacket: null !default; // will not be printed. @return null; } + +/////////////////////////////////////////////////////////// +// jacket-add-contexts function +// Function to add Contexts to the Jacket Context. +// Outputs The new Jacket Variable, which has already been set globally +// Contexts have to be seperated by comma, wrapper have to be seperated from +// their context by space. +/////////////////////////////////////////////////////////// +@function jacket-add-contexts($contexts...) { + @each $context in $contexts { + @if ($jacket == null){ + $jacket:$context !global; + }@else{ + $jacket:append($jacket, $context, $separator:comma) !global; + } + } + @return $jacket; +} From 76547cc2ff7e4390e0e1e7f67538e6dd2b5ac242 Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Sat, 19 Jul 2014 10:35:21 +0200 Subject: [PATCH 7/9] new function jacket-else($value, $else, $contexts...) It will return $value if the $contexts match or $else if not. --- stylesheets/_jacket.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index e581d94..02b2fda 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -114,6 +114,22 @@ $jacket: null !default; @return null; } +/////////////////////////////////////////////////////////// +// jacket-else function +// Takes a list of jacket contexts. +// Outputs a value if a context is set. +// Outputs another value if a context is not set. +/////////////////////////////////////////////////////////// +@function jacket-else($value, $else, $contexts...) { + // If the weather is right, return the value! + @if (jacket(true, $contexts)){ + @return $value; + } + + // Else, rany weather, but retrun at least something else. + @return $else; +} + /////////////////////////////////////////////////////////// // jacket-add-contexts function // Function to add Contexts to the Jacket Context. From 0a60e177eae007606adea8b2a1de17c49f08aa29 Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Sat, 19 Jul 2014 23:16:52 +0200 Subject: [PATCH 8/9] DEBUG, make all this work flawlessly, those Lists are hard to handle --- stylesheets/_jacket.scss | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index 02b2fda..a14cf64 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -49,7 +49,12 @@ $jacket: null !default; // that matched against the $jacket variable. /////////////////////////////////////////////////////////// @function jacket-match($contexts...) { + // unpack stangely packed lists + @if (length($contexts) == 1){ + $contexts:nth($contexts, 1); + } + $naked: false; $selectors: (); $filtered: (); @@ -63,6 +68,8 @@ $jacket: null !default; // Test if a jacket context and jacket value match. @each $item in $jacket { @each $context in $contexts { + + @if index($context, nth($item, 1)) and not ($context == null) { // Gather wrapping selectors. @@ -103,6 +110,11 @@ $jacket: null !default; // Outputs a value if a context is set. /////////////////////////////////////////////////////////// @function jacket($value, $contexts...) { + // unpack stangely packed lists + @if (length($contexts) == 1){ + $contexts:nth($contexts, 1); + } + $matchResult:jacket-match($contexts); @if ( nth($matchResult, 1) or (nth($matchResult, 2) != '')){ // If the weather is right, return the value! @@ -121,12 +133,17 @@ $jacket: null !default; // Outputs another value if a context is not set. /////////////////////////////////////////////////////////// @function jacket-else($value, $else, $contexts...) { + // unpack stangely packed lists + @if (length($contexts) == 1){ + $contexts:nth($contexts, 1); + } + // If the weather is right, return the value! - @if (jacket(true, $contexts)){ + @if (jacket(true,$contexts)){ @return $value; } - // Else, rany weather, but retrun at least something else. + // Else, rainy weather, but retrun at least something else. @return $else; } From 2158cbff732e558bc45dc4c59c2345c4923e2ffa Mon Sep 17 00:00:00 2001 From: Hannes Morgenstern Date: Sun, 20 Jul 2014 10:51:46 +0200 Subject: [PATCH 9/9] Update documentation --- readme.md | 28 +++++++++++++++++++++++++--- stylesheets/_jacket.scss | 4 ++-- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 6dc3b38..3efe157 100644 --- a/readme.md +++ b/readme.md @@ -24,7 +24,7 @@ Until Sass 3.3 is released Jacket requires Compass. ### The jacket() mixin -Use the jacket mixin to conditionally output blocks of code. If any context in the jacket mixin matches a context in the `$jacket` variable, your conditional code will be output. If the `$jacket` variable context has a wrapping selector associated with it, the code block will be wrapped in the wrapping selector. +Use the jacket mixin to conditionally output blocks of code. If any context in the jacket mixin matches a context in the `$jacket` variable, your conditional code will be output. To submit more than one context to the jacket mixin, they have to be seperated by comma. If the `$jacket` variable context has a wrapping selector associated with it, the code block will be wrapped in the wrapping selector. ```scss jacket($contexts...) { @@ -34,20 +34,42 @@ jacket($contexts...) { ### The jacket() function -Use the jacket function to conditionally output values. If any context in the jacket function matches a context in the `$jacket` variable, the value will be output. +Use the jacket function to conditionally output values. If any context in the jacket function matches a context in the `$jacket` variable, the value will be output. To submit more than one context to the jacket function, they have to be seperated by comma. If none of the submitted contexts matches a context in the `$jacket` variable, the jacket function will return null. ```scss property: jacket($value, $contexts...); ``` +### The jacket-else() function + +This function is similar to the jacket() function. In contrast to the jacket() function, jacket-else() will return an else value if none of the submitted contexts matches a context in the `$jacket` variable. In case of a match, it will return the value like the jacket() function. To submit more than one context to the jacket-else function, they have to be seperated by comma. + +```scss +property: jacket-else($value, $else, $contexts...); +``` + ### The $jacket variable -Use the `$jacket` variable to set a stylesheet's context. You can set multiple contexts in a comma separated list. Each context can have an optional wrapping selector associated with it. +Use the `$jacket` variable to set a stylesheet's context. You can set multiple contexts in a comma separated list. Each context can have an optional wrapping selector associated with it. The wrapping selector has to be seperated from the context by space. ``` $jacket: context, context '.wrapping-selector', context; ``` +## The jacket-add-contexts() function + +Instead of manipulating the `$jacket` variable by hand, you can use this tool. +It is no poblem to define the `$jacket` variable once and keep it that way. But if you are in the need to add contexts to the `$jacket` variable at different places in your code, you have to be verry careful to not destroy the structure of the list of the `$jacket` variable. +`jacket-add-contexts()` will do that for you. It will add the new contexts to the list. The new list will be retruned by the function. It also adds the new contexts to the `$jacket` variable globally. So it is not necessary that you assign the return value to the `$jacket` variable, but if you do, it will do no harm. +Contexts have to be seperated by comma, wrapping selector associated have to be seperated from their context by space. + +``` +$var:jacket-add-contexts(context1); +$var:jacket-add-contexts(context2 wrapper2, context3); +$jacket:jacket-add-contexts(context4, context5); +$jacket:jacket-add-contexts(context6 wrapper6, context7 wrapper7); +@debug jacket-add-contexts(do, what, erver you, want); +``` ### Examples diff --git a/stylesheets/_jacket.scss b/stylesheets/_jacket.scss index a14cf64..b0fd587 100644 --- a/stylesheets/_jacket.scss +++ b/stylesheets/_jacket.scss @@ -151,8 +151,8 @@ $jacket: null !default; // jacket-add-contexts function // Function to add Contexts to the Jacket Context. // Outputs The new Jacket Variable, which has already been set globally -// Contexts have to be seperated by comma, wrapper have to be seperated from -// their context by space. +// Contexts have to be seperated by comma, wrapping selector associated +// have to be seperated from their context by space. /////////////////////////////////////////////////////////// @function jacket-add-contexts($contexts...) { @each $context in $contexts {