如何解决scss中相同组件的不同颜色？答案

【问题标题】：how to solve difference color for same component in scss?如何解决scss中相同组件的不同颜色？
【发布时间】：2019-12-27 09:02:32
【问题描述】：

如何解决scss中同一组件的不同颜色？

例如，border-bottom 的 nav-item 有时我会使用 #F57C00，但有时会使用 #FF5252。我想根据网站中的不同位置显示三种颜色。我怎样才能容易做到？谢谢。

HTML

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

SCSS

.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;
        }
    }
}

【问题讨论】：

使用不同的类，每个类都有不同的颜色:)
@AasimHussainKhan 然后我需要重复很多次。有什么例子吗？
这个“要根据不同的地方显示三种颜色”是什么意思？你可以有不同颜色的不同地方的父类。是的，你必须重复课程，但至少 CSS 不需要。
您可以使用 SASS 变量，例如$边框颜色：#F57C00;。请检查此sass-lang.com/documentation/variables
@Veey $red-color: #FF5252; $橙色颜色：#F57C00； .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus { 边框颜色：#F57C00;边框底色：透明； } 如何轻松把它变成边框颜色？

标签： html css web sass

【解决方案1】：

//颜色可以使用三个变量，所以只需要改变变量就可以改变颜色，

$primary-color:#F57C00; $secondary-color:#FF5252;

.tab-container {
    margin: 5px;
    padding: 5px 0px;
    color: #000000;
    font-size: 14px;
    height: 100%;
    .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 {
        a {
            display: block;
            float: left;
            background: #ddd;
            padding: 10px;
            width: 80%;
        }
        .active {
            border-width: 1px;
            color: $primary-color;
            border-style: solid;
            border-color: $primary-color;
        }
    }
}



<div class="tab-container"> 
<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>

请参考链接查看演示， https://jsfiddle.net/jignashagpatel/ydjx08vg/16/

【讨论】：

【解决方案2】：

您可以使用 SCSS 中的变量来存储颜色。然后可以使用它们而不必每次都提及十六进制。它还有助于保持代码的可维护性，以防您将来想更改颜色，您只需更改分配给变量的颜色即可。

【讨论】：