首页 文章

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

提问于
浏览 次
1

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

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;
        }
    }
colors sass

1 回答

  • 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;
}
    回复于

相关问题