显示十六进制颜色由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; 
}