<script>
export default {
}
</script>

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

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

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

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

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