SASS+BEM问题：P元素添加修饰类后未变粉色的原因排查

你的问题核心是SASS生成的CSS选择器和HTML里的类名完全不匹配，导致样式无法生效，具体错误和修正方法如下：

错误原因拆解 #

你写的SASS代码编译后会生成这样的CSS：

p {
  font-size: 1rem;
}
p--pink {
  color: pink;
}

这里的p--pink是一个无效的标签选择器，它会试图匹配<p--pink>这种不存在的标签，而不是带有--pink类的<p>标签。同时你HTML里用的block__p类，在SASS代码中根本没有定义，自然不会有任何样式效果。

两种修正方案 #

方案一：直接给p标签加修饰类 #

如果只想给特定p标签加粉色文字，把SASS改成类选择器的嵌套写法：

p {
  font-size: 1rem;

  // 用普通类名
  &.pink {
    color: pink;
  }

  // 或者坚持用--开头的类名（合法但不常用）
  // &.--pink {
  //   color: pink;
  // }
}

对应的HTML写法：

<p class="pink">this is placeholder text.</p>

（如果用--pink类名，HTML就写<p class="--pink">...</p>）

方案二：用BEM规范命名（更推荐） #

如果遵循BEM命名规则，先给p元素定义一个基础类，再基于它写修饰符：

// 基础类
.text-block {
  font-size: 1rem;

  // 修饰符：基于基础类的变种样式
  &--pink {
    color: pink;
  }
}

对应的HTML（BEM规范要求修饰符和基础类同时使用）：

<p class="text-block text-block--pink">this is placeholder text.</p>

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