SASS中子类命名时如何用变量获取父类类名替代硬编码

在 .card 选择器内部重新定义 $self 变量，让它指向当前的 .card 选择器，就能用变量拼接出 card__body 类名了。

修改后的代码：

.project{
  $self: &;
  .card{
    $self: &; // 重新定义$self，现在指向当前的.card选择器
    #{$self}__name{
       font-weight:bold;
    }
    #{$self}__body{
       display:flex;
    }
  }
}

编译后的CSS结果：

.project .card__name {
  font-weight: bold;
}
.project .card__body {
  display: flex;
}

说明 #

• SASS变量的作用域是嵌套层级内的，.project 里定义的 $self 只会在 .project 内部生效；
• 进入 .card 嵌套后，重新声明 $self: &，此时 & 代表当前的 .card 选择器，后续用 #{$self}__body 就能自动生成 .card__body；
• 这种写法能避免硬编码类名，后续如果要修改 .card 的类名，只需要改一处即可，提升代码可维护性。

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