CSS中父选择器&插值失败：除完整类名外的替代方案？

这个问题我之前也碰到过！核心原因是**&在插值时会包含类选择器开头的点**，导致生成的属性选择器匹配不到正确的class值。比如你的代码里，&代表的是.navbar__menu（假设外层是.navbar），直接插值后会变成[class^=.navbar__menu__item]，但HTML里的class值是不带点的，自然就失效了。

给你两个可行的解决办法，不用写完整类名：

方法1：用字符串函数提取不带点的类名 #

利用SCSS的str-slice函数去掉&开头的点，再进行插值：

.navbar {
  &__menu {
    float: left;
    list-style: none none;
    padding: $navbar-menu_padding;

    // 提取不带点的类名（从第2个字符开始截取，去掉开头的"."）
    $base-class: str-slice(&, 2);
    [class^=#{$base-class}__item] {
      // 你的样式规则，比如：
      margin-right: 1rem;
      color: #333;
    }
  }
}

编译后的CSS会是：

.navbar__menu {
  float: left;
  list-style: none none;
  padding: /* 你的变量值 */;
}
[class^=navbar__menu__item] {
  margin-right: 1rem;
  color: #333;
}

这样就能正确匹配所有class以navbar__menu__item开头的元素了。

如果你的SCSS版本较低（低于3.3），str-slice不支持，可以用str-replace替换掉点：

$base-class: str-replace(&, '.', '');

方法2：提前定义基础类名变量 #

如果你的项目里常用BEM命名，可以提前把基础类名存成变量，后续直接引用：

// 提前定义基础类名
$navbar-base: 'navbar';

.#{$navbar-base} {
  &__menu {
    float: left;
    list-style: none none;
    padding: $navbar-menu_padding;

    // 直接拼接变量生成选择器
    [class^=#{$navbar-base}__menu__item] {
      // 样式规则
    }
  }
}

这种方法可读性更强，也避免了字符串处理的问题，适合大型项目统一管理类名。

为什么原来的写法失效？ #

再补充下原理：SCSS中的&代表当前完整的选择器，包括开头的点。当你把&插值到属性选择器里时，生成的是[class^=.navbar__menu__item]，但HTML元素的class属性值是navbar__menu__item（不带点），所以这个选择器无法匹配任何元素，自然就失效了。

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