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

---

Sass总是编译成CSS，所以如果CSS无法做到这一点，Sass也无法做到。CSS不可能知道给定元素下面是什么；因为这也取决于交付到页面的HTML

但是，您可以只使用CSS更高级的颜色值规范，其中包括带有和的半透明功能。例如：

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

---

是白色的，25%透明。因此，它将使它后面的东西变亮25%。

背景色：变暗（$black-blue，10%）

我不明白你怎么认为这会起作用。Sass怎么知道你想要什么颜色的颜色？可能是cimmanon的复制品-这就是为什么我要问，我不知道这是否可能这几乎就像问题的答案一样这是一个复制品。几乎就像这个应该作为一个副本关闭一样。@cimmanon您的答案中没有提到使用alpha值背景色，这是我提供的替代解决方案的核心。这些问题相似，但不同之处在于，这一个问题专门询问背景颜色，而另一个问题询问颜色。如果你想在这方面有更高的知名度，请随意将它带到meta。当涉及到Sass时，“颜色”和“背景色”之间有着天壤之别。但是CSS有一个缺点，它提供了一种解决方法。

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

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