htmlsassbem

SASS: BEM --pink to a P element

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>
Solution

  • 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.