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

Итак, я пытаюсь использовать цикл for in для создания некоторых классов (используя препроцессор 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; }
    }
  }
}

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

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


stylus
person avcajaraville    schedule 08.09.2015    source источник
comment
Что это за язык ?   -  person eran otzap    schedule 08.09.2015
comment
Стилус, как указано на теге вопроса. В любом случае, я редактирую вопрос   -  person avcajaraville    schedule 08.09.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

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

Но я попробовал пример, который вы предоставили в последней версии Stylus (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;
}
person kizu    schedule 08.09.2015
comment
Да, спасибо большое, теперь это работает. Проблема заключалась в опечатке в моем реальном коде. Большое спасибо, вы поставили меня в нужное место :) - person avcajaraville; 08.09.2015