Vue

by Andrei Gheorghiu

HTML

<div id="app">
  <select v-model="s0">
    <option v-for="s in 6" :key="s" v-text="s - 1"></option>
  </select>
  <div :class="['-mt-' + s0 * 8]">
      <pre v-text="':class=[\'-mt-' + s0 * 8 + '\']'"></pre>
  </div>
</div>

SCSS

@for $i from 0 through 5 {
  $name: $i * 8;
  $value: $i * 0.5;
  .-mt-#{$name} {
    margin-top: #{$value}rem;
    background-color: #f5f5f5;
    padding: .25rem;
  }
}
body { margin: 1rem }

Vue

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  data: {
    s0: 1
  }
})