Как назначить цвет (color picker) для переменной в препроцессоре?

Question

[Константин]

У меня в кастомайзере есть настройка цвета, ниже в примере меняется цвет ссылок на установленный в колор пикере просто добавляя цвет в класс. Вопрос, а как быть если у меня цвета в препроцессоре записаны в переменные и мне нужно поменять цвет для переменной.

У меня основной цвет сайта это переменная (в sass) $primary = #454545

Вот код кастомайзера:

<?
add_action('customize_register','action_customize_register');
if(!function_exists('action_customize_register')){
	function action_customize_register($customizer){
		$customizer->add_section('section_VAB_Top_Panel',array('title'=>__("Верхняя панель","VAB"),'description'=>'','priority'=>55,));
		$customizer->add_setting('VAB_Menu_TopLink',array('default'=>''));
		$customizer->add_control(new WP_Customize_Color_Control($customizer,'VAB_Menu_TopLink',array('label'=>__("Цвет ссылок меню верхней панели","VAB"),'section'=>'section_VAB_Top_Panel','settings'=>'VAB_Menu_TopLink',)));
	}
}
//Вывод
?>
<div id="Menu_Top" class="Menu_Top">
	<ul>
		<li><a href="#"><?php _e('Ссылка первая','VAB');?></a></li>
		<li><a href="#"><?php _e('Ссылка вторая','VAB');?></a></li>
		<li><a href="#"><?php _e('Ссылка третья','VAB');?></a></li>
		<li><a href="#"><?php _e('Ссылка четвертая','VAB');?></a></li>
	</ul>
</div>
<style type="text/css">
	#Menu_Top a{color:<?php if(get_theme_mod('VAB_Menu_TopLink')){echo get_theme_mod('VAB_Menu_TopLink');}else{print('#FFFF00');}?>;}
</style>

Answer 1

[Константин]

Оказывается переменные sass видны только на этапе компиляции, в конечном css их нет. И sass переменные отличаются от кастомных css. В связи с этим пришлось переписать все переменные в кастомные.

Например было так в sass:

$primary = #000

То в кастомых реализовал так:

:root {
    --primary: #faaa00;
}

И применяются так:

.my_box {
color: var(--primary); 
}