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

Question

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

http://www.ttmt.org.uk/color/

中心块颜色保存为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%);  
    }

然后我在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>

并在单独的 scss 文件中设置框的样式

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

Answer 1

您可以使用content 显示它：http://jsfiddle.net/A9rML/

$color : rgb(38, 126, 200);

div{
    background-color: $color;
    &:after{

        content: "#{$color}";
        font-size: 42px;
        color: white;
    }
    width: 200px;
    height: 200px;
}