sass 变量管理

$title-size:16px; $top: $title-size + 20px; 
  $icon-size:24px; $left: $icon-size + 10px;
  $options: (
    '存证锚定': '\E00C',
    '第三方身份': '\E00D',
    '去中心化': '\E010',
    '时间戳证明': '\E011',
    '证据链举证': '\E00E',
    '低成本': '\E00F'
  );

$keys: map-keys($map: $options);
@for $i from 1 through 6 {
    p:nth-child(#{$i}) {
        &::before{content: nth($keys, $i)}
        &::after{content: map-get($map: $options, $key: nth($keys, $i))}
    }
}
       

编译结果如下：

.scienceInnovate-tab [slot='content'] p:nth-child(1)::before {
  content: "存证锚定";
}

.scienceInnovate-tab [slot='content'] p:nth-child(1)::after {
  content: "";
}

.scienceInnovate-tab [slot='content'] p:nth-child(2)::before {
  content: "第三方身份";
}

.scienceInnovate-tab [slot='content'] p:nth-child(2)::after {
  content: "";
}

.scienceInnovate-tab [slot='content'] p:nth-child(3)::before {
  content: "去中心化";
}

.scienceInnovate-tab [slot='content'] p:nth-child(3)::after {
  content: "";
}

.scienceInnovate-tab [slot='content'] p:nth-child(4)::before {
  content: "时间戳证明";
}

.scienceInnovate-tab [slot='content'] p:nth-child(4)::after {
  content: "";
}

.scienceInnovate-tab [slot='content'] p:nth-child(5)::before {
  content: "证据链举证";
}

.scienceInnovate-tab [slot='content'] p:nth-child(5)::after {
  content: "";
}

.scienceInnovate-tab [slot='content'] p:nth-child(6)::before {
  content: "低成本";
}

.scienceInnovate-tab [slot='content'] p:nth-child(6)::after {
  content: "";
}