我这里有一个页面来说明我的问题
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%);
}
因此,不是参考颜色,它只会使颜色变暗/变暗 .
这就是全部
$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%);
}
1 回答
Sass总是编译成CSS,所以如果CSS无法做到这一点,那么Sass也无法做到 . CSS无法知道给定元素下面的内容;因为这也取决于传递给页面的HTML .
但是,您可以使用CSS更高级的颜色值规范,其中包括RGBA和HSLA的半透明功能 . 例如:
是白色的,透明度为25% . 因此,它将使其背后的任何东西减轻25% .