Best way to share constants between Javascript & CSS

Question

I'm creating a website with lots of dynamic stuff laid out in javascript, as well as CSS. What's bothering me is that half of my dimension constants (positions and sizes of things on the page) are in my javascript, whereas others are in my CSS. Is there a good way to have a "single place" for constants like this?

First I thought I could use a CSS generator like LessCss or SASS, but in the documentation for those I see no way of accessing declared constants from another javascript file either. Can anyone point me to a clear, idiomatic way of handling this issue?

Thanks for any help!

EDIT:

To clarify what my problem is: Part of my page consists of a highly-spezialized spreadsheet component I've built from scratch in javascript to run in a canvas element. I have lots of layout constants related to this component, such as cell_width,cell_height, etc. that are not standard CSS properties. Other components of my website are more typical, and are styled by CSS. What I'm wondering is if there's an accepted way for maintain a single place to keep my CSS and Javascript styling constants in a single place. This could either be by somehow maintaining "custom" properties in my CSS that are used only be reading them via javascript. Or, if LessCss or SASS have a way to set variables via my own javascript prior to rendering, that would work as well. However, I have found no info online on either of these subjects.

Answer 1

If the "constant" corresponds to some parameter that can be ready from an element, then in your javascript startup you can read that element. For example, if what you care about is the width of some element with id="foo" you could use (assuming jquery)

$('#foo').width()

or

$('#foo').css('width')

But for more complex sets of global variable, I've started using a hack of embedding stuff as strings in the background-image attribute of a hidden div. This works because you can put just about anything in a background-image string. And then in javascript startup I can read that string from background-image on that div and decode it to javascript.

For example, I have a .less file with these "constants"

@hide-time: 450;
@hide-final-width: 40;

and in that .less file I use these for this div

#css-shared-globals {
  background-image: url("about:$$$({hideChatTime:@{hide-chat-time},hideFinalWidth:@{hide-final-width}})$$$");
  display:none;
}

in the related .html file is this otherwise-useless div:

<div id="css-shared-globals" style="display:none;"></div>

and finally in .js I can read the shared global constant from that hidden div with this startup code:

// load globals from chat.less
var el = $('#css-shared-globals');
var elObj = eval(decodeURI(el.css('background-image').split('$$$')[1]));
hide_time = elObj.hideChatTime;
hide_final_width = elObj.hideFinalWidth;

The result of the whole kludge is that my .less (or .css) and .js files are seeing the same constants and I only need to change them in one place (the less or css file). It's a mess but, so far, it works.

Answer 2

Is there a good way to have a "single place" for constants like this?

The stylesheet.

Then dynamically set class names.

(At least in many cases. We don't know the specifics of your problem)