<script setup>
// TODO review: 撰写setTimeout + v-bind控制show-green颜色
// unmount去掉setTimeout

</script>

<template>
<div>
  <div class="scss-conditional">
    {{'$show-green: false;\n'
    + '.scss-conditional {\n'
    + '  @if $show-green {\n'
    + '    color: #00FF00;\n'
    + '  } @else {\n'
    + '    color: #126085;\n'
    + '  }\n'
    + '}\n'}}
  </div>
</div>
</template>

<style scoped lang="scss">
$show-green: false;   /* 不支持在style里面声明的变量动态改变 */
.scss-conditional {
  @if $show-green {
    color: #00FF00;
  } @else {
    // color: #7b78a8;
    color:#126085
  }

  font-size: 14;
  left: 10;
  top: 0;
  width: 220;
  height: 140;
}
</style>