Display hex color created by sass

Question

I have a simple page here:

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

The center blocks color is saved as a variable in sass

The color of the blocks either side are created with sass's lighten and darken.

Is it possible to display the actual hex number of these lighter and darker colors that sass has created.

The color's hex are displayed in the output css but I'd like to be able to do it dynamically and display the hex color in the block.

I have the colors in scss file

    $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%);  
    }

Then I'm using the class name in the 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>

And styling the box in separate scss file

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

JAre JAre · Accepted Answer · 2014-06-29T07:51:38

You can use content to show it : 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;
}

Display hex color created by sass

1 Answers