<script>
export default {
}
</script>

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

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

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

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

  .scss-prop-nesting { // 属性嵌套
    font: {
      size: 14;
      weight: bold;
    }
    text: {
      align: left;
    }

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

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

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