How to access an object property dynamically? - stylus

Question

So, Im trying to use a for in loop to generate some classes (using Stylus preprocessor).
I have defined an object like this:
$color = {
... (lot of properties) ...
product: {
product1 : {
base : #8c735e,
dark : #715544,
darkest : #674b3c
},
product2 : {
base : #a77c3e,
dark : #8f6129,
darkest : #835020
},
product2 : {
base : #6d91a4,
dark : #4d748c,
darkest : #416d88
},
}
... (lot of properties) ...
}
What I want to produce is the following:
.product-is--product1 {
h1, h2 { color: #715544; }
}
.product-is--product2 {
h1, h2 { color: #8f6129; }
}
.product-is--product3 {
h1, h2 { color: #4d748c; }
}
What I have tried is something like this:
products = product1, product2, product3;
for product in products {
.product-is {
&--{product} {
h1, h2 { color: $color.product[product].dark; }
}
}
}
This obviously doesn't work. Tried lot of different combinations and google, stack overflowed it, read the docs, etc, but nothing.
Does anybody know how can I access the $color object based on the value on the for ?

Answer 1

You can iterate right through the object, getting the key and the values like this:
$color = {
product: {
product1 : {
base : #8c735e,
dark : #715544,
darkest : #674b3c
},
product2 : {
base : #a77c3e,
dark : #8f6129,
darkest : #835020
},
product3 : {
base : #6d91a4,
dark : #4d748c,
darkest : #416d88
},
}
}
for $product_key, $product_colors in $color.product {
.product-is {
&--{$product_key} {
h1, h2 { color: $product_colors.dark; }
}
}
}
But I've tried the example you provided in the latest Stylus (0.52.4) and it works:
$color = {
product: {
product1 : {
base : #8c735e,
dark : #715544,
darkest : #674b3c
},
product2 : {
base : #a77c3e,
dark : #8f6129,
darkest : #835020
},
product3 : {
base : #6d91a4,
dark : #4d748c,
darkest : #416d88
},
}
}
products = product1, product2, product3;
for product in products {
.product-is {
&--{product} {
h1, h2 { color: $color.product[product].dark; }
}
}
}
As well as my first example both generate
.product-is--product1 h1,
.product-is--product1 h2 {
color: #715544;
}
.product-is--product2 h1,
.product-is--product2 h2 {
color: #8f6129;
}
.product-is--product3 h1,
.product-is--product3 h2 {
color: #4d748c;
}