Question: I am working on an app written in Polymer. 

I have some CSS variables defined like this:

```
:root {
  --my-option-1: #ff8a80;
  --my-option-2: #4a148c;
  --my-option-3: #8c9eff;
}

```

The user literally chooses "1", "2", or "3". I have a function that looks like this:

```
// The v parameter will be 1, 2, or 3
function getOptionColor(v) {
  var name = '--my-option-' + v;
  return ?;
}

```

I need `getOptionColor` to return `#ff8a80`, `#4a148c`, or `#8c9eff` based on the value entered into the function. However, I do not know how to get the value of a CSS variable at runtime. Is there a way to do this? If so, how?

Answer: 
You can use a constructor, I don't see a need for inheritance

```
function Config(key, name, icon, values, filterFn) {
    this.key = key;
    this.name = name;
    this.icon = icon;
    this.values = values;
    this.filterFn = filterFn;
}

var cfg = {};
// Don't want to repeat "someKey"? put it in a variable.
var myKey = 'someKey';
cfg[myKey] = new Config(myKey, 'someName', 'icon', 
                         [1,2], function(obj){ return obj + myKey});
myKey = 'otherKey';
cfg[myKey] = new Config(myKey, 'anotherName', 'anotherIcon',
                         [3,4], function(obj){ return obj + '_' + myKey});

// Or create a method to help, may be overdoing it...
function addConfig(key, name, icon, values, filterFn) {
    cfg[myKey] = new Config(key, name, icon, values, filterFn];
}

addConfig('someKey', 'thatName', 'thisIcon', [6,7], o => o);

```

In EcmaScript 6, you can save some typing 

```
function Config(key, name, icon, values, filterFn) {
    Object.assign(this, {key, name, icon, values, filterFn});
}

```
What I've done before:

```
var defaultConfig = {
    everything: 'goes',
    'in': {here: ""},
    once: true
};
var selectedOptions = jQuery.extend(true, {}, defaultConfig, optionConfig);

```

Where optionConfig can look like this:

```
{once: false}

```