diff --git a/demo/app.js b/demo/app.js index 903a244..b19dcb2 100644 --- a/demo/app.js +++ b/demo/app.js @@ -51,6 +51,10 @@ function checkedValue(nodes) { .filter(Boolean)[0]; } +function isBlending(suggestion) { + return (/^blend-/i).test(suggestion.format); +} + function suggest(e) { var result = "

Nothing to suggest

"; var fromField = $("#from input"); @@ -78,6 +82,10 @@ function suggest(e) { ]).join(""); } + if (preprocessor == "sass" && suggestions.some(isBlending)) { + result += "

Note: For blend-* formats, use scss-blend-modes.

"; + } + $(".suggestions").innerHTML = result; } diff --git a/lib/main.js b/lib/main.js index d865866..8b91e6d 100644 --- a/lib/main.js +++ b/lib/main.js @@ -92,7 +92,7 @@ function suggestBlendingFunction(functionName) { color: newColor, difference: difference, complexity: 50, - format: format(functionName + "({input}, " + blendColor.toCSS() + ")", preprocessor) + format: format("{" + functionName + "}({input}, " + blendColor.toCSS() + ")", preprocessor) }); } @@ -107,7 +107,14 @@ var dialects = { sass: { input: "$input", greyscale: "grayscale", - spin: "adjust-hue" + spin: "adjust-hue", + + multiply: "blend-multiply", + screen: "blend-screen", + overlay: "blend-overlay", + difference: "blend-difference", + exclusion: "blend-exclusion", + softlight: "blend-softlight" } }; @@ -142,12 +149,13 @@ var functions = { spin: suggestParameterFunction("spin", -359, 359, ''), greyscale: suggestSimpleFunction("greyscale"), - multiply: lessOnly(suggestBlendingFunction("multiply")), - screen: lessOnly(suggestBlendingFunction("screen")), - overlay: lessOnly(suggestBlendingFunction("overlay")), - difference: lessOnly(suggestBlendingFunction("difference")), - exclusion: lessOnly(suggestBlendingFunction("exclusion")), - softlight: lessOnly(suggestBlendingFunction("softlight")), + multiply: suggestBlendingFunction("multiply"), + screen: suggestBlendingFunction("screen"), + overlay: suggestBlendingFunction("overlay"), + difference: suggestBlendingFunction("difference"), + exclusion: suggestBlendingFunction("exclusion"), + softlight: suggestBlendingFunction("softlight"), + contrast: lessOnly(suggestSimpleFunction("contrast")) // TODO: SASS-only: complement, invert, mix