Question

所以，我试图使用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; }
    }
  }
}

这显然不起作用。尝试了很多不同的组合和谷歌，堆栈溢出它，阅读文档等，但没有。

有人知道如何根据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;
}

如何动态访问对象属性？

1 个答案: