Vue.js动态<style>与变量

我有一些动态特性，可以用JS和更少的代码来操作SCSS。我用bulma如下

<style lang="scss" scoped>
  $size-10: 10px;
  $size-9: 20px;
  $size-8: 30px;
  $size-7: 10px;
  $size-6: 20px;
  $size-5: 30px;
  $size-4: 40px;
  $size-3: 50px;
  $size-2: 60px;
  $size-1: 70px;
  $sizes: (
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  );
  $positions: (
    "top",
    "left",
    "bottom",
    "right"
  );
  $bulmaSizes: (
    $size-1,
    $size-2,
    $size-3,
    $size-4,
    $size-5,
    $size-6,
    $size-7,
    $size-8,
    $size-9,
    $size-10
  );
  $i: 1;
  @each $size in $sizes {
    $sizee: nth($bulmaSizes, $i);
    $i: $i+1;
    .has-margin-#{$size} {
      margin: $sizee !important;
    }
    @each $position in $positions {
      .has-padding-#{$position}-#{$size} {
        margin-#{$position}: $sizee !important;
      }
    }
  }
</style>

希望这会对你们中的一些人有所帮助。