Могу ли я рассчитать монохромные значения цвета с помощью SASS или CSS3?

-6

Я хотел бы иметь возможность указать базовый цвет, например:

$basecolor: #ff0000;

и вычислять другие (более темные) цвета на основе этого. например:

$backgroundcolor: ($basecolor + rgba(0, 0, 0, .25));
$disabledcolor: ($basecolor + rgba(0, 0, 0, .5));
/* etc */

Это возможно?

Я делаю это сейчас, создавая оверлей, но для этого требуется добавить дополнительный html и чувствовать себя грязным. например:

.overlay25 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .25);
}

Затем опускание:

<div class="elementIWantToMakeDarker">
    <div class="overlay25">
        <p>content</p>
    </div>
</div>

Каков наилучший способ сделать это?

спросил(а) 5 лет, 10 месяцев назад

drewwyatt

пожаловаться

Самый простой способ сделать это - использовать функции darken() и lighten() Sass:

$color:       #123465;
$color_dark:  darken($color, 50%);
$color_light: lighten($color, 50%);

Вы также можете использовать функцию mix(), которая позволяет комбинировать два цвета с относительным весом:

$color:       #123465;
$color_dark:  mix($color, black, 50%);
$color_light: mix($color, white, 50%);

ответил(а) 5 лет, 10 месяцев назад

zessx

пожаловаться

Ваш ответ