Html Question posted in
Some basic documentation can be found here.

Html – How to fix my SCSS so it's applying the text color?

might be best explain with an example

this is the HTML snippet of my breadcrumb. This comes with its own breadcrumbs.scss.

<div class="container">
  <div class="cmp-container">
    <div class="my-grid">
      <div class="breadcrumb container">
        <nav class="cmp-breadcrumb">
          <ol class="cmp-breadcrumb__list">
            <li class="cmp-breadcrumb__item">
              <a href="/content/page2.html" class="cmp-breadcrumb__item-link">
                <span class="cmp-breadcrumb__link-text">Go To Page2</span>
              </a>
            </li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</div>

"Go to Page2" is supposed to display in purple. But the selector is getting the color assigned in a different SCSS. It’s currently displaying in pink.

There’s obviously some specifity issues and I’m hoping you can help fix it (still using SASS).

PS. I’ve tried using "!important" in breadcrumb.scss and this fixes my issue but I consider that as a last resort.

This SCSS snippet from breadcrumbs.scss

.theme1 {
    .cmp-breadcrumb {
        .&__item-link {
                color: var(--bs-purple);
        }
    }
}

This the snippet of the other SCSS (

.theme1 {
    .container {
        a {
            color: var(--bs-pink);
            &:hover {
                color: var(--bs-pink);
            }
        }
    }
}
Tags:

2

Answers


  1. 0

    If you can only use sass,then I think !important is the only way?Maybe use Javascript?

    Login or Signup to reply.
  2. 0

    You have two problems going on there:

    1. As phil noticed, you have invalid sass. The correct syntax is:
        .cmp-breadcrumb {
        &__item-link { /* I removed the dot */
            color: var(--bs-purple);
        }
    }
    1. Your css specificity is applying incorrectly:
      For the purple color, the rule has a specificity of 0-2-0, whereas your pink has a 0-3-1 (2 classes + :hover = 3, and a nav element selector)
      In order to fix this, reduce the specificity of the pink rule or increase the purple’s one. I would go for the first approach as unnecessary descendant selectors hurt (a bit) performance
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search