Sass - 在没有颜色参考的情况下减轻颜色

时间:2014-06-28 11:16:06

标签: sass

我这里有一个页面来说明我的问题

www.ttmt.org.uk/color

它只是具有基色的颜色块,然后我使用sass来淡化和变暗从中心开始的颜色。

我在这里通过给eavh div(颜色块)一个类名,然后在sass中引用该名称并使基色变亮或变暗来完成它。

这有点像sass所以我想是可以在没有参考sass语句中的那种颜色的情况下使颜色变浅或变暗

所以没有

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

因此,它不会引用颜色,只会使颜色变暗/变暗。

这是所有sass

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

2 个答案:

答案 0 :(得分:8)

Sass总是编译成CSS,所以如果CSS无法做到这一点,Sass也无法做到。 CSS无法知道给定元素下面的内容;因为这也取决于传递给页面的HTML。

但是,您可以使用CSS更高级的颜色值规范,其中包括RGBAHSLA - 透明功能。例如:

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

是白色的,透明度为25%。因此,它将使其背后的任何东西减轻25%。

答案 1 :(得分:0)

background-color: darken($black-blue, 10%);