Как получить доступ к объекту динамически?

Question

Итак, я пытаюсь использовать цикл for for для генерации некоторых классов (с использованием препроцессора Stylus).

Я определил объект, как это:

$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) ... 
} 

То, что я хочу, чтобы произвести следующий:

.product-is--product1 { 
    h1, h2 { color: #715544; } 
} 
.product-is--product2 { 
    h1, h2 { color: #8f6129; } 
} 
.product-is--product3 { 
    h1, h2 { color: #4d748c; } 
} 

То, что я пытался что-то вроде этого:

products = product1, product2, product3; 

for product in products { 
    .product-is { 
    &--{product} { 
     h1, h2 { color: $color.product[product].dark; } 
    } 
    } 
} 

Это, очевидно, не работает. Пробовал много разных комбинаций и google, стек переполнял его, читал документы и т. Д., Но ничего.

Кто-нибудь знает, как я могу получить доступ к объекту $ color, основанному на значении для for?

Answer 1

Вы можете перемещаться прямо через объект, получить ключ и значения, как это:

$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; } 
    } 
    } 
} 

Но я попробовал пример вы предоставили в последнем Стилус (0.52.4) и это работает:

$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; } 
    } 
    } 
} 

Как и мой первый пример, как генерировать

.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; 
}