Могу ли я рассчитать монохромные значения цвета с помощью 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>

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

спросил(а) 2015-04-23T18:21:00+03:00 5 лет, 5 месяцев назад
0
57

Самый простой способ сделать это - использовать функции 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%);

ответил(а) 2015-04-23T18:23:00+03:00 5 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема