SCSS不同父级同标签样式代码简化方案问询

我的导航HTML结构如下：

<nav>
  <div class="nav-item lvl-0">
    <a></a>
    <div class="sub">
      <div class="nav-item lvl-1">
        <a></a>
      </div>
    </div>
  </div>
</nav>

我已经在默认样式层为导航内所有<a>标签设置了基础样式，现在想为不同层级的<a>标签添加独立样式，当前使用的SCSS代码如下：

nav {
    .nav-item {
        a {padding:0;}
        &.lvl-0 {
            > a {@extend .size-18;}
        }

        &.lvl-1 {
            > a {@extend .size-13;}
        }
    }
}

请问是否可以将代码改写成如下简化形式？

nav {
    .nav-item {
        a {padding:0; 
            .lvl-0 > & {@extend .size-18;}
            .lvl-1 > & {@extend .size-13;}
        }
    }
}

不行，这种改写方式会生成错误的CSS选择器，完全无法匹配你的HTML结构。

具体差异说明： #

1. 原SCSS编译后的正确选择器
   原代码编译后，针对层级<a>标签的选择器是：

   nav .nav-item.lvl-0 > a { /* 继承.size-18的样式 */ }
   nav .nav-item.lvl-1 > a { /* 继承.size-13的样式 */ }
   

   这个选择器能准确匹配同时带有nav-item和lvl-0/lvl-1类的div的直接子元素<a>，和你的HTML结构完全对应。

2. 改写后SCSS生成的错误选择器
   你改写后的代码编译后，生成的选择器是：

   nav .nav-item .lvl-0 > a { /* 继承.size-18的样式 */ }
   nav .nav-item .lvl-1 > a { /* 继承.size-13的样式 */ }
   

   这个选择器找的是**nav-item元素内部的、带有lvl-0/lvl-1类的元素的直接子元素<a>**，但你的HTML里lvl-0/lvl-1是和nav-item同一个div的类，不是子元素，所以完全匹配不到目标标签。

推荐的简化写法 #

如果想要更紧凑的写法，可以保留父选择器&的正确用法，写成以下形式，效果和原代码完全一致：

nav {
  .nav-item {
    a { padding: 0; }
    &.lvl-0 > a { @extend .size-18; }
    &.lvl-1 > a { @extend .size-13; }
  }
}

内容的提问来源于stack exchange，提问作者Moseleyi