SASS: BEM --pink to a P element

Question

I've delcared my modifier to the P element as per below. In HTML (at the bottom), what am I doing incorrectly as the p tags do not change to pink if I declare the class name as shown.

p {
    font-size: 1rem;

    &--pink{
        color: pink;
    }
}

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

I thought it was a simple spacing error from the p to the " --pink" but that makes no difference to the outcome.

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

Answer 1

The correct selector for a <p> tag with a class of --pink is p.--pink. You are missing the . (class selector).

p {
  font-size: 1rem;

  &.--pink{
    color: pink;
  }
}

See it working.

I recommend The Sass Playground, which allows you to see in real time the CSS output of your SCSS.