<script>
export default {
}
</script>

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

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

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

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

  .less-prop-nesting { // 属性嵌套(不支持)
    color: #5a4ba4;
    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>