Using variables in stylesheets?

kabu

Hello!  Right now, I'm using SugarCube, but could switch back to SugarCane without much trouble if that makes things easier.

I'd like to have the background color of my passages change in response to actions the player takes, such as becoming redder as you descend into madness (mwah ha ha ha!).  So in a Stylesheet page, I want to turn something like this:

<br />html.theme-shade body {<br /> color: #f00;<br /> background-color:hsl(240, 50%, 50%);<br />}

into something like this:

<br />html.theme-shade body {<br /> color: #f00;<br /> background-color:hsl(&lt;&lt;print $madnessLevel&gt;&gt;, 50%, 50%);<br />}

This approach works inline with <style></style> tags inside passages, but I'd like to not have to do that for every single passage and rather just have it be in the CSS page.  How can I do this? Would using SugarCube widgets help?

Thanks!

TheMadExile

You could achieve what you wanted via passage tags, however, that would likely be cumbersome.

The simplest thing would probably be to use one of the following two examples (do not use both, pick one).  They're untested, but should work.

Via the postrender task object: (put this in a script tagged passage)


postrender["colorizeMadness"] = function (content) {
var madness = state.active.variables["madnessLevel"];
$(document.body).css("background-color", "hsl(" + madness + ", 50%, 50%)");
};


Via the PassageDone special passage:


<<run $(document.body).css("background-color", "hsl(" + $madnessLevel + ", 50%, 50%)")>>