Sass嵌套元素与类拼接问题：代码未按预期编译

首先直接给结论：你写的Sass代码和你预期的CSS完全不是一回事，这就是样式不生效的核心原因。

为什么会不等价？ #

你误解了Sass中父选择器&的工作逻辑：&是直接替换为当前上下文的完整选择器字符串，当你写&-parent-one时，它会把&（也就是.my-class）和-parent-one直接拼接成一个新的类选择器——.my-class-parent-one，而不是你以为的后代选择器.my-class .my-class-parent-one。

再看你这段Sass代码：

.my-class { 
  &-parent-one &-wrapper &-cell { 
    font-size: 1.15rem; 
  } 
  &-parent-two &-wrapper &-cell { 
    font-size: 0.85rem; 
  } 
}

它实际编译出来的CSS是这样的：

.my-class-parent-one .my-class-parent-one-wrapper .my-class-parent-one-wrapper-cell {
  font-size: 1.15rem;
}
.my-class-parent-two .my-class-parent-two-wrapper .my-class-parent-two-wrapper-cell {
  font-size: 0.85rem;
}

显然这和你预期的.my-class .my-class-parent-one .my-class-wrapper .my-class-child完全不匹配，自然无法选中页面上的元素。

正确的写法应该怎么写？ #

要实现你预期的CSS结构，有两种常见的写法：

写法1：直接写出完整的后代选择器

最直观的方式，直接按照CSS的层级嵌套：

.my-class {
  .my-class-parent-one {
    .my-class-wrapper {
      .my-class-child {
        font-size: 1.15rem;
      }
    }
  }
  
  .my-class-parent-two {
    .my-class-wrapper {
      .my-class-child {
        font-size: 0.85rem;
      }
    }
  }
}

写法2：用变量统一前缀（推荐，更易维护）

如果你的类名前缀都是my-class-，可以用变量来统一管理，避免重复书写：

$class-prefix: my-class;

.#{$class-prefix} {
  .#{$class-prefix}-parent-one {
    .#{$class-prefix}-wrapper {
      .#{$class-prefix}-child {
        font-size: 1.15rem;
      }
    }
  }
  
  .#{$class-prefix}-parent-two {
    .#{$class-prefix}-wrapper {
      .#{$class-prefix}-child {
        font-size: 0.85rem;
      }
    }
  }
}

这两种写法都会编译出你预期的CSS代码，就能正确选中页面上的元素了。

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