顯示十六進制顏色由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; 
}