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 . ' " ' : '' ?> >

Answer 3

如果您真的想使用SCSS变量，我可以想到一种方法。

在编译之前，您需要使用PHP生成SCSS文件。

假设您从数据库中获得了该数组：

$variables = [
    'primaryColor' => 'red',
    'secondaryColor => 'blue',
];

您可以使用此数据来生成仅包含变量的SCSS文件。

$scss = '';

foreach ($variables as $name => $value) {
    $line = sprintf('$%s: %s;', $name, $value) . PHP_EOL;
    $scss .= $line;
}

file_put_contents('/path/to/scss/directory/_variables.scss', $scss);

这将产生此文件（_variables.scss）：

$primaryColor: red;
$secondaryColor: blue;

现在将此文件导入到您的主要SCSS样式表中。

@import 'variables';

.container {
    background-color: $primaryColor;
    color: $secondaryColor;
}

编译时将产生以下CSS：

.container {
    background-color: red;
    color: blue;
}

唯一的问题是，如果更改值，则必须重新编译所有SCSS。您可以使用 Leafo scssphp 快速执行此操作：https://leafo.net/scssphp/

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

3 个答案: