StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I consider my solution to be quite hokey; but it does work...</p> <p>In my <code>_base.scss</code> I have some variables defined:</p> <pre><code>$menu_bg: rgb(45, 45, 45); $menu_hover: rgb(0, 0, 0); </code></pre> <p>In a <code>menu.scss</code> I have:</p> <pre><code>@import "base"; #jquery_vars { .menu_bg { background-color: $menu_bg; } .menu_hover { background-color: $menu_hover; } } </code></pre> <p>And in a handy page template:</p> <pre><code><span class="is_hidden" id="jquery_vars"> <span class="is_hidden menu_bg"></span> <span class="is_hidden menu_hover"></span> </span> </code></pre> <p>Finally this allows in a nearby jQuery script:</p> <pre><code>var menu_bg = $('#jquery_vars .menu_bg').css("background-color"); var menu_hover = $('#jquery_vars .menu_hover').css("background-color"); </code></pre> <p>This is so ugly my dad is wearing a bag on his head.</p> <p>jQuery can pull arbitrary CSS values from page elements; but those elements have to exist. I did try pulling some of these values from raw CSS without creating the spans in the HTML and jQuery came up with <code>undefined</code>. Obviously, if these variables are assigned to "real" objects on your page, you don't really need the arbitrary <code>#jquery_vars</code> element. At the same time, one might forget that <code>.sidebar-left nice-menu li</code> is the vital element being use to feed variables to jQuery.</p> <p>If someone has anything else, it's got to be cleaner than this...</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload