薩斯 - 減輕顏色無色差參考

Question

我有一個頁面，在這裏，說明我的問題

www.ttmt.org.uk/color

這是有底色，然後我的顏色只有幾個街區使用sass來減輕和使中心的顏色變暗。

我已經在這裏做了它，給eavh div（顏色塊）一個類名，然後在sass中引用該名稱並且減淡或者變暗基色。

這是一個有點青菜的，所以我想是可以給予變亮或變暗顏色不引用該顏色在SASS statment

所以不是有

<div class="at-blue-lightest"></div> 

    // 

    at-blue{ 
     background-color: $base-blue; 
    } 

    .at-blue-lightest{ 
     background: lighten($base-blue, 30%); 
    } 

我可能有：

<div class="at-blue lightest"></div> 

    // 

    .at-blue{ 
     background-color: $base-blue; 
    } 

    .lightest{ 
     background: lighten(30%); 
    } 

因此，不是引用顏色，它只會減輕/加深任何顏色。

這是所有的青菜

$base-blue: #267EC8; 
    $base-green: #00A504; 
    $base-red: #EA002A; 
    $base-gray: #aaaaaa; 

    .box{ 
     height: 150px; 
     margin: 0 10px 10px 0; 
     width: 150px; 
     float: left; 
    } 

    .con{ 
     overflow: auto; 
    } 

    .at-blue{ 
     background-color: $base-blue; 
    } 
    .at-red{ 
     background-color: $base-red; 
    } 
    .at-green{ 
     background-color: $base-green; 
    } 

    .at-blue-lightest{ 
     background: lighten($base-blue, 30%); 
    } 

    .at-blue-lighter{ 
     background: lighten($base-blue, 20%); 
    } 

    .at-blue-light{ 
     background: lighten($base-blue, 10%); 
    } 

    .at-blue-dark{ 
     background: darken($base-blue, 10%);  
    } 

    .at-blue-darker{ 
     background: darken($base-blue, 20%);  
    } 

    .at-blue-darkest{ 
     background: darken($base-blue, 30%);  
    } 


    .at-red-lightest{ 
     background: lighten($base-red, 30%); 
    } 

    .at-red-lighter{ 
     background: lighten($base-red, 20%); 
    } 

    .at-red-light{ 
     background: lighten($base-red, 10%); 
    } 

    .at-red-dark{ 
     background: darken($base-red, 10%); 
    } 

    .at-red-darker{ 
     background: darken($base-red, 20%); 
    } 

    .at-red-darkest{ 
     background: darken($base-red, 30%); 
    } 


    .at-green-lightest{ 
     background: lighten($base-green, 30%); 
    } 

    .at-green-lighter{ 
     background: lighten($base-green, 20%); 
    } 

    .at-green-light{ 
     background: lighten($base-green, 10%); 
    } 

    .at-green-dark{ 
     background: darken($base-green, 10%); 
    } 

    .at-green-darker{ 
     background: darken($base-green, 20%); 
    } 

    .at-green-darkest{ 
     background: darken($base-, 30%);  
    } 

Answer 1

薩斯總是編譯爲CSS，所以如果有沒有辦法，CSS可以做到這一點，無論是可薩斯。 CSS無法知道給定元素下面的內容;因爲這取決於傳遞給頁面的HTML。

但是，你可以使用CSS的更先進的色值說明，其中包括與RGBA和HSLA半 -transparent功能。例如：

background: rgba(255, 255, 255, .25); 

是25％透明的白色。因此它會減輕25％的負擔。