<script>
export default {
}
</script>

<template>
<div>
  <div class="scss-var-general">
    {{'$my-color: #126085; // 一般变量\n'
    + '.scss-var-general {\n'
    + '  color: $my-color;\n'
    + '}'}}
  </div>
  <div class="scss-var-enclosing">
    {{'.scss-var-enclosing {\n'
    + '  $my-color: #5a4ba4; // 局部变量\n'
    + '  color: $my-color;\n'
    + '}'}}
  </div>
</div>
</template>

<style scoped lang="scss">
$my-color: #0F0F00; // 一般变量
$my-color: #126085; // 变量改值
.scss-var-general {
  color: $my-color;

  font-size: 14;
  left: 10;
  top: 0;
  width: 220;
  height: 140;
}

.scss-var-enclosing {
  // 只在 .scss-enclosing 里有效，局部作用域
  $my-color: #5a4ba4; // 局部变量
  color: $my-color;

  font-size: 13;
  left: 10;
  top: 68;
  width: 220;
  height: 140;
}

</style>
