Question

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

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

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

任何一侧的街区颜色都是用sass＆l; s变亮和变暗的。

是否可以显示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;
}

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

1 个答案: