Как расширить кастомное свойство SCSS?

Question

[Vann Damm]

Есть кастомное свойство rgb, наследуя css свойства которого, я должен создать новое кастомное свойство с определенной прозрачностью. Как это можно сделать правильно?

$bg_main: rbg(32 , 32 , 32); - первоначальное кастомное свойство.

Должно получиться так:

$custom_bg_main: rgba($bg_main , 0.5); - новое кастомное свойство с прозрачностью.

Нужно именно расширить первоначальное.

Comments

[Ankhena]

Если вы перестанете делать опечатки в последовательности букв rgb, то проблема исчезнет.

[Vann Damm]

Ankhena, в коде все правильно, тут сам писал просто, так такой синаксис scss принимает получается? Тогда буду копать дальше

[Vann Damm]

Ankhena, нет, такая запись как я предложил не работает, видимо scss не поддерживает такой синтаксис. Как это можно реализовать по другому?

[Ankhena]

Vann Damm, очевидно, что всё работает https://codepen.io/Ankhena/pen/GRZomPB
Альтернатива: использовать цветовые функции, описанные в спеке препроцессора, opacify, transparentize

[Vann Damm]

Ankhena, Да , извиняюсь, такая запись работает но я не думал что браузер не странспилирует синтаксис типа var(--) , как быть в таком случае?

[Ankhena]

Vann Damm, ну и каша...
при чем тут SCSS?
так:

--r: 32;
--g: 32;
--b: 32;
--bg_main: var(--r), var(--g), var(--b);
--custom_bg_main: rgba(var(--bg_main), 0.5);

[Vann Damm]

Ankhena, Вы немного не поняли. У меня bg_main и custom_bg_main - это локальные scss переменные, а --n900 и --n20 , а в вашем случае --r --g --b, это все записанное в documentElement, и исходя из --n900 записанного в documentElemet т.е глобально, я уже создаю разные цвета , меняя его прозрачность.
Вот так:

$N900: var(--n900);
//other-backgrounds
// main-background - главный бэкграунд
$N0: var(--n0);
$N20: var(--n20);
//BORDER BACKGROUND FOR ALL BORDER-BLOCKS - цвет бордера(ДЛЯ ВСЕХ БЛОКОВ) для разделения блоков на темы
$N10: var(--n10);

// Blue
$B100: var(--b100);
$B300: var(--b300);
$B500a3: var(--b500a3);
$B900: var(--b900);

// Grey
$N10a3: var(--n10a3);
$N500: var(--n500);

// Green
$G400: var(--g400);
$G500: var(--g500);
$G500a1: var(--g500a1);
$G500a2: var(--g500a2);

// Red
$R400: var(--r400);
$R500: var(--r500);
$R500a1: var(--r500a1);
$R500a2: var(--r500a2);

// Other
$border-blocks_color: $N10;
$body-color_subitems: $N100;

$border_radius: 5px;
$col_spacing: 8px;
$col_width: 100% / 8;

//BG
//container-hover-items-colors

// $container-colors:(
//  header: $N30;
// );

$bg_main: $N0;
$bg_color_body-conet_menu: $N0;
$bg_color_header: $N30;
$bg_color_body-menu: $N20;
$bg_color_header_elem: $N600;
// $bg_color_body_elem: $N600;
$bg_color_header-hover_elem: rgba($N30, 0.3);
$bg_color_body-menu-hover_elem: rgba($N20, 0.5);
$bg_color_body-content-hover_elem: rgba($N30, 0.8);
$bg_color_footer-hover_elem: rgba($N30, 0.3);
$bg_color_button-disabled: $N100;
$bg_color_lines: rgb(54, 54, 54);
$bg_color_icons: rgb(227, 227, 227);
$bg_color_sub-icons: rgb(128, 128, 128);

//COLOR
$color-elements-main: $N900;
$orange_button_color: $R400;
$green_button_color: $G500;
//OTHER

//SUB-ICONS:- Icons in dropdown,words helpers and etc.
$line_height: 20px;
$table_col_padding_side: 5px;
$table_col_padding_top: 2px;
$trans: 0.2s ease;
$fontSize: 14px;
$fontFamily: Regular, "Roboto Condensed", sans-serif;

темы:

.light {
	//HEADER

	//header-backgrounds

	//backgound color for header
	//--n30: rgb(217, 77, 68);

	//color for header icons and text
	--n600: rgb(172, 172, 172);
	//для всего выпдающего и вылетающего из хедера динамические использовать другие блоки стилей , кароче все побочное стилизуется отдельно

	//BODY

	//body-backgrounds
	//backgroun color for body

	//color

	//BODY-MENU

	//background color for body-menu
	--n20: rgb(250, 250, 250);

	//BODY-CONTENT
	//DROPDOWN BLOCKS - добавить задачу, напоминания, настройки и т.п
	//FOOTER

	//OTHER

	//ПОВТОРАЯЕТСЯ --N100 - COLOR FOR BODY SUBITEMS - цвет для элементов с которыми можно взаимодействовать(в ТЕЛЕ проекта находящиеся)
	//color for body subitems - цвет для элементов с которыми можно взаимодействовать(в ТЕЛЕ проекта находящиеся
	--n100: rgb(141, 141, 141);

	// color for body subelements - цвет красный для субкнопок, которые встречаются редко
	--b500: rgb(219, 76, 63);
	// main color in project - главные цвет для всех элементов в проекте
	--n900: rgb(0, 0, 0);
	//other-backgrounds
	// main-background - главный бэкграунд
	--n0: rgb(255, 255, 255);

	//BORDER BACKGROUND FOR ALL BLOCKS - цвет бордера(ДЛЯ ВСЕХ БЛОКОВ) для разделения блоков на темы
	--n10: rgb(186, 186, 186);

	// NOT USE - покуда не использованные
	--n10a3: rgba(249, 249, 249, 0.3);
	--n20: rgb(245, 245, 245);
	--n30: rgb(201, 200, 200);
	--n500: rgb(206, 206, 206);
	--n600: rgb(172, 172, 172);

	--b100: rgb(219, 237, 251);
	--b300: rgb(179, 214, 252);
	--b500: rgb(14, 123, 249);
	--b500a3: rgba(14, 123, 249, 0.3);
	--b900: rgb(32, 39, 57);

	--g400: rgb(71, 215, 141);
	--g500: rgb(61, 189, 125);
	--g500a1: rgba(61, 189, 125, 0.1);
	--g500a2: rgba(61, 189, 125, 0.2);

	--r400: rgb(255, 100, 100);
	--r500: rgb(255, 0, 0);
	--r500a1: rgba(255, 0, 0, 0.1);
	--r500a2: rgba(255, 0, 0, 0.2);
}

.dark {
	//HEADER

	//header-backgrounds

	//backgound color for header
	--n30: rgb(40, 40, 40);

	//color for header icons and text
	--n600: rgb(227, 227, 227);
	//для всего выпдающего и вылетающего из хедера динамические использовать другие блоки стилей , кароче все побочное стилизуется отдельно

	//BODY

	//body-backgrounds
	//backgroun color for body

	//color

	//BODY-MENU

	//background color for body-menu
	--n20: rgb(40, 40, 40);

	//BODY-CONTENT
	//DROPDOWN BLOCKS - добавить задачу, напоминания, настройки и т.п
	//FOOTER

	//OTHER

	//ПОВТОРАЯЕТСЯ --N100 - COLOR FOR BODY SUBITEMS - цвет для элементов с которыми можно взаимодействовать(в ТЕЛЕ проекта находящиеся)
	//color for body subitems - цвет для элементов с которыми можно взаимодействовать(в ТЕЛЕ проекта находящиеся
	--n100: rgb(141, 141, 141);

	// color for body subelements - цвет красный для субкнопок, которые встречаются редко
	--b500: rgb(219, 76, 63);
	// main color in project - главные цвет для всех элементов в проекте
	--n900: rgb(227, 227, 227);
	//other-backgrounds
	// main-background - главный бэкграунд
	--n0: rgb(31, 31, 31);

	//BORDER BACKGROUND FOR ALL BLOCKS - цвет бордера(ДЛЯ ВСЕХ БЛОКОВ) для разделения блоков на темы
	--n10: rgb(186, 186, 186);

	// NOT USE - покуда не использованные

	--n0: rgb(31, 31, 31);
	--n100: rgb(114, 126, 151);
	--n10: rgb(39, 46, 62);
	--n10a3: rgba(39, 46, 62, 0.3);
	--n20: rgb(25, 44, 74);
	--n30: rgb(40, 40, 40);
	--n500: rgb(46, 50, 58);
	--n600: rgb(54, 54, 54);
	--n900: rgb(255, 255, 255);

	--b100: rgb(219, 237, 251);
	--b300: rgb(39, 46, 62);
	--b500: rgb(14, 123, 249);
	--b500a3: rgba(14, 123, 249, 0.3);
	--b900: rgb(32, 39, 57);

	--g400: rgb(0, 220, 103);
	--g500: rgb(0, 197, 96);
	--g500a1: rgba(0, 197, 96, 0.1);
	--g500a2: rgba(0, 197, 96, 0.2);

	--r400: rgb(248, 23, 1);
	--r500: rgb(221, 23, 1);
	--r500a1: rgba(221, 23, 1, 0.1);
	--r500a2: rgba(221, 23, 1, 0.2);
}

[Ankhena]

Vann Damm, я не вижу другого способа, кроме как разбивать цвета на отдельные составляющие.
Для тем, возможно, интереснее использовать hsl формат.

Возможно, эта статья наведет вас на какие-нибудь идеи по упрощению задачи https://css-tricks.com/switch-font-color-for-diffe...

[Vann Damm]

Ankhena, Спасибо