Sass mixin для конвертации цвета из HEX в RGBa (прозрачный)

В этой записи пойдет речь о том как сделать из конвертировать 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);
}