how to solve difference color for same component in scss?

How to solve difference colors for a same component in scss?

For example, border-bottom of nav-item sometimes I will use #F57C00 but sometimes will use #FF5252. I have three colors want to display based on difference places in a website. How can I easy to make it? Thanks.

<div class="tab-content" id="myTabContent">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="true">A</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">B</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">C</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">D</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">E</a>
                    </li>
                </ul>
</div>

.tab-container {
    margin: 5px;
    padding: 5px 0px;
    color: #000000;
    font-size: 14px;
    height: 100%;
    // border-style: dashed;
    // border-color: #F57C00;

    p {
        margin: 0;
    }

    h2 {
        font-size: 18px;
        font-weight: bold;
    }

    .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
        border-color: #F57C00;
        border-bottom-color: transparent;
    }

    .nav-tabs {
       border-bottom: 1px solid #F57C00;
       font-weight: bold;
    }

    .nav-item {
        .active {
            border-width: 1px;
            color: #F57C00;
            border-style: solid;
            border-color: #F57C00;
        }
    }
}