В этой записи пойдет речь о том как сделать из конвертировать HEX формат в RGBa в Sass. Иными словами: с обычного цвета, на подобии #000000
(черный), в rgba(0, 0, 0, .5)
(на половину прозрачный черный).
Где это можно пригодиться?
Допустим вы пишите стили для сайта и чтобы вручную не вписывать прозрачность цвета вручную, лучше создать один mixin, который будет делать всю повторяющуюся работу за вас.
Sass mixin
В mixin
ниже можно увидеть два основных аргумента — $color
и $opacity
. Первый — это цвет, который вы хотите перевести в RGBa форма, а второе — это прозрачность (или с англ. «альфаканал»). По умолчанию прозрачность стоит на половину.
Если вы никогда не сталкивались с mixin
, то самое время узнать об этом.
@mixin background-opacity($color, $opacity: 0.5) { background: $color; /* На всякий случай */ background: rgba($color, $opacity); }
Ниже показан пример того как это использовать:
.element {
@include background-opacity(#000, 0.3);
}
После чего это станет таким:
.element { background: #000; /* На всякий случай */ background: rgba(0, 0, 0, 0.3); }