vue中使用scss动态获取JS变量

list: [
  {
    title: "Ⅰ级风险",
    color: "#ff3333",
  },
  {
    title: "Ⅱ级风险",
    color: "#ff9554",
  },
  {
    title: "Ⅲ级风险",
    color: "#ba50b0",
  },
  {
    title: "Ⅳ级风险",
    color: "#4885fb",
  },
  {
    title: "无风险",
    color: "#66cc00",
  },
],

<ul>
  <li
		class="item"
    :style="{'--color': item.color,}"
    v-for="(item, index) in list"
  	:key="index"
	>
  	{{ item.title }}
  </li>
</ul>

.legend-item {
  font-size: 12px;
  
  &:before {
    position: relative;
    top: 13px;
    left: -16px;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color);
    content: "";
  }
}