How can I efficiently import css values into javascript file?

Question

I have a colors.less file that maintains consistent color palette for a site.

I also have a chart.js file that requires hard coded colors to display chart elements in appropriate colors.

How can I make the chart colors dependent on the generated colors.css file?

So far I've been maintaining two color palettes, one in less and another in js. How can I merge the two?

Example:

/* colors.less */
@green:    #46a546;
@red:      #9d261d;
@yellow:   #f1c40f;

and

/* chart.js */
var chartElements = {
    "apples": {
        label: "Apples",
        color: "#46a546",
    },
    "oranges": {
        label: "Oranges",
        color: "#f1c40f",
    },
    "grapes": {
        label: "Grapes",
        color: "#9d261d",
    }...

How can I stop maintaining both sets of colors?

build script or set values to elements and read the elements in JavaScript. — epascarello
– epascarello, Commented Feb 9, 2015 at 16:31
There is no (easy) way LESS can read your JS, so do it in the other way: read CSS from JS, just like here (i find my comment to short to be an answer) stackoverflow.com/questions/10362445/… — pdem
– pdem, Commented Feb 9, 2015 at 16:34

jAndy · Accepted Answer · 2015-02-09 16:39:25Z

3

Even tho Pointy's answer may fit better here (talking about LESS), I want to remind that you can access stylesheet data directly via ECMAscript. You might be able to identify a specific rule and just grab the value. Might look like

[].forEach.call(document.styleSheets, function( set ) {
  if( set.href && set.href.indexOf( 'dialog.css' ) > -1 ) {
    [].forEach.call( set.cssRules, function( rule ) {
      if( rule.selectorText === 'div#dialog-container-left' ) {
        // to whatever here, grab the value and store it for global application usage
        console.log( rule.style.backgroundColor );
      }
    });
  }
});

answered Feb 9, 2015 at 16:39

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2015-02-09 16:31:08Z

0

Having that exact problem, I "solved" it with the following hack.

The CSS includes a list of "swatch-nn" classes (swatch-1, swatch-2, and so on). Those get the pre-defined LESS constants as their background color. (For me, a simple numerically-ordered list works; other situations might call for other approaches.)

My SPA wrapper creates a (hidden) list of elements that have the swatch classes.

<div id=swatches>
  <div class=swatch-1>
  <div class=swatch-2>
  <!-- etc -->
</div>

Some JavaScript code at application startup populates a globally-available list of colors from the swatches.

var swatches = {}, $swatchContainer = $("#swatches"), rname = /\bswatch-(.*)\b/;

$swatchContainer.children("div").each(function() {
    var swatch = this;
    this.className.replace(rname, function(_, label) {
        swatches[label] = $(swatch).css("backgroundColor");
    });
})

$.swatches = swatches;

My Chart.js code thus copies the color values out of that global array. It's crude but it works fine.

answered Feb 9, 2015 at 16:31

Pointy

415k62 gold badges600 silver badges631 bronze badges

3 Comments

Ryan Over a year ago

If I understand you correctly, in your DOM, you have a set of hidden objects colored by your LESS, named swatch-nn. Then you can reference these at any time using js? ... Edit: I see you're editing your answer. I'll be patient and let you fill in the gaps. Thanks!

Pointy Over a year ago

@Ryan yes - I just added the code I actually use to fetch the background colors at startup time.

Ryan Over a year ago

Thanks @Pointy, I started with your solution, but found that I could dynamically add and remove elements as necessary and keep my html clean. So the js can just reference the class name like so: $("<span>").addClass(className).appendTo(document).css("background-color");. My actual solution is a bit more involved, but you get the idea.

Collectives™ on Stack Overflow

How can I efficiently import css values into javascript file?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related