Colors 显示sass创建的十六进制颜色

我这里有一个简单的页面：

中心块颜色保存为sass中的变量

两侧块的颜色由sass的亮显和暗显创建

是否可以显示sass创建的这些较亮和较暗颜色的实际十六进制数

颜色的十六进制显示在输出css中，但我希望能够动态地这样做，并在块中显示十六进制颜色

我在scss文件中有颜色

    $base-blue: #267EC8;

    // Blue

    .at-blue{
        background-color: $base-blue;
    }

    .at-blue-lighter{
        background-color: lighten($base-blue, 20%);
    }

    .at-blue-light{
        background-color: lighten($base-blue, 10%);
    }

    .at-blue-dark{
        background-color: darken($base-blue, 10%);  
    }

    .at-blue-darker{
        background-color: darken($base-blue, 20%);  
    }

    .my_Box{
        text-align: center;
        height: 120px;
        float: left;
        padding: 10px;
        margin: 0 30px 0 0;
        width: 120px;

        span{
            display: block;
            font-size: 1.2em;
            margin: 10px 0 0 0;
        }
    }

然后我在html中使用类名

    <div class="my_Box at-blue-lighter" >.at-blue-lighter<span></span></div>
    <div class="my_Box at-blue-light" >.at-blue-light<span></span></div>
    <div class="my_Box at-blue" >.at-blue <span></span></div>
    <div class="my_Box at-blue-dark" >.at-blue-dark<span></span></div>
    <div class="my_Box at-blue-darker" >.at-blue-darker<span></span></div>

---

您可以使用

内容

来显示它：

$color:rgb（38126200）；
div{
背景色：$color；
&：之后{
内容：“#{$color}”；
字体大小：42px；
颜色：白色；
}
宽度：200px；
高度：200px；
}

JAre，这看起来很完美，但我正在一个单独的scss文件中动态创建颜色，我不知道该怎么做。我已经用进一步的代码更新了我的问题。@ttmt您可以设置

。在蓝色打火机上{font size bg color，text color等}

并在文件中使用颜色

。在蓝色打火机上：在{content:“{$some color}”}之后

然后

之后将从
继承字体大小和颜色等样式。在蓝色打火机上