是否可以使用Wordpress CMS更改SCSS变量？

Question

我有一个即将到来的项目，其中涉及创建Wordpress主题，该主题将可以在样式上进行较小的更改而重复使用。

例如，我应该能够使用ACF十六进制颜色选择器选择主题的主要和辅助颜色，然后将其反映在前端以更新网站的外观。

我目前使用SASS / Gulp在本地进行样式更改。

我曾考虑过使用Javascript来识别在body标记上设置的数据属性，该属性将由CMS内设置的字段填充-但我无法想象这对于页面速度等很有用，因为它将不断变化页面加载中元素的颜色...

任何想法，我都会接受所有建议！

提前感谢：）

Answer 1

使用SCSS变量并不容易，因为它们在编译时被替换为实际值。在编译之前，您必须使用PHP生成SCSS样式表。

您可以在使用PHP打印的<style>标记中定义CSS定制属性。

<?php $primaryColor = 'red'; ?>
<?php $secondaryColor = 'blue'; ?>
<style>
    --primary-color: <?php echo $primaryColor; ?>;
    --secondary-color: <?php echo $secondaryColor; ?>;
</style>

然后您可以在其他CSS中使用自定义属性。

.container {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

阅读有关自定义CSS属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Answer 2

您可以将所选值存储在数据库中，并在所需元素上使用内联样式覆盖外部CSS：

<div <?php isset($primary) ? print 'style="background-color:' . $primary . ' " ' : '' ?> >