Can SCSS Replace Classes?

[cahoskins]

In some cases, I want to add an additional class to a field and sometimes I want to replace a class with another. Instead of modifying the header.php, could I do this in scss?

Examples:

The red-highlighted text on the left is the default child header.php, and the red-highlighted on the right is what I changed or added.

[crftwrk]

Sure, here is a rough example how to target classes inside the #masthead wrapper. You need !important to override Bootstrap utilities.

• navbar-secondary does not exist
• Don't know what you did with navbar-brand, but override display utilities with !important
• offcanvas-title has already margin-bottom: 0;, no need to add mb-0 class

#masthead {

  // Navbar bg
  .bg-light {
    background-color: var(--#{$prefix}secondary) !important;
  }

  // Nav links
  .nav-link {
    color: $navbar-dark-color;

    &:hover,
    &:focus {
      color: $navbar-dark-hover-color;
    }

    .active {
      color: $navbar-dark-active-color;
    }
  }

  // Offcanvas
  #offcanvas-navbar {

    .offcanvas-body {
      background-color: var(--#{$prefix}secondary);
    }
  }
}

Since bootScore 5.3, bg-light classes changed to bg-body-tertiary

[cahoskins]

OOh, ignore the post below because I figured it out!

.btn-outline-secondary {
	color: var(--#{$prefix}light) !important;
	border-color: white !important;
}

Great! It all works except for the button color and button outline are now dark (I didn't include that in the screenshot I pasted above).

This doesn't work:

button { btn-outline-secondary: var(--#{$prefix}light); }

This doesn't work:

button { .btn { btn-outline-secondary: var(--#{$prefix}light) !important; } }
Nor this:

button#btn { btn-outline-secondary: var(--#{$prefix}light) !important; }

Please help!!!

[cahoskins]

crftwrk You are so amazing! Thank you, this is really fun.

[crftwrk]

Thank you! But your buttons won't work that way because you target all .btn-outline-secondary in the document and buttons have a hover and active state as well. Use @extend to make this buttons real light buttons and target them in the header by the #masthead selector:

#masthead .btn-outline-secondary {
  @extend .btn-outline-light;
}

You can add this to the loop from my previous comment:

#masthead {

  // Buttons
  .btn-outline-secondary {
    @extend .btn-outline-light;
  }

  // Navbar bg
  .bg-light {
    background-color: var(--#{$prefix}secondary) !important;
  }

  // Nav links
  .nav-link {
    color: $navbar-dark-color;

    &:hover,
    &:focus {
      color: $navbar-dark-hover-color;
    }

    .active {
      color: $navbar-dark-active-color;
    }
  }

  // Offcanvas
  #offcanvas-navbar {

    .offcanvas-body {
      background-color: var(--#{$prefix}secondary);
    }
  }
}