如何动态访问对象属性？

Question

因此，我尝试使用 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; }
    }
  }
}

这显然行不通。尝试了很多不同的组合和 google、堆栈溢出、阅读文档等，但一无所获。

有人知道如何根据 for 的值访问 $color 对象吗？

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

但我已经尝试了您在最新的 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;
}

如何动态访问对象属性？

How to access an object property dynamically?

stylus