<script>
export default {
}
</script>

<template>
<div class="stylus-root">
  <div class="stylus-rule-nesting">
    {{'.stylus-root {\n'
    + '  color: #126085;\n'
    + '  .stylus-rule-nesting { // 规则嵌套\n'
    + '    font-size: 14;\n'
    + '  }\n'
    + '}'}}
  </div>
  <div class="stylus-prop-nesting">
    {{'// 属性嵌套\n'
    + '不支持'}}
  </div>
  <div class="stylus-root-parent-selector">
    {{'.stylus-root {\n'
    + '  color: #126085;\n'
    + '  &-parent-selector { // 父选择器\n'
    + '    font-size: 14;\n'
    + '  }\n'
    + '}'}}
  </div>
</div>
</template>

<style scoped lang='stylus'>
.stylus-root {
  color: #126085;

  .stylus-rule-nesting { // 规则嵌套
    font-size: 14;

    left: 10;
    top: 3;
    width: 230;
    height: 140;
  }

  .stylus-prop-nesting { // 属性嵌套(不支持)
    color: #5a4ba4;
    font-size: 14; // 不支持 font:{size:14} 写法

    left: 10;
    top: 120;
    width: 230;
    height: 140;
  }

  &-parent-selector { // 父选择器
    font-size: 14;

    left: 10;
    top: 280;
    width: 230;
    height: 140;
  }
}
</style>