Можно ли использовать Wordpress CMS для изменения переменных S CSS? - PullRequest
Новая
       10

Можно ли использовать Wordpress CMS для изменения переменных S CSS?

1 голос
/ 24 января 2020

У меня есть предстоящий проект, который включает в себя создание темы Wordpress, которую можно будет повторно использовать с небольшими изменениями стиля.

Например, я должен иметь возможность выбрать основной и дополнительный цвета темы с помощью шестнадцатеричного палитры цветов ACF, который затем будет отражен на внешнем интерфейсе для обновления внешнего вида веб-сайта.

В настоящее время я использую SASS / Gulp для локального изменения стиля.

Я думал об использовании Javascript для идентификации атрибутов данных, установленных в теге body, который будет заполнен полями установить в CMS - но я не могу представить, что это было бы здорово для скорости страницы и т. д. c. как бы менялись цвета элементов при загрузке страницы ...

Буду признателен за любые идеи, я открыт для всех предложений!

Заранее спасибо :))

Ответы [ 3 ]

1 голос
/ 24 января 2020

Использование переменных S CSS не будет работать легко, потому что они заменяются точными значениями при компиляции. Вам нужно будет сгенерировать таблицу стилей S CSS, используя PHP перед ее компиляцией.

Вы можете определить CSS пользовательские свойства в теге <style>, который вы печатаете, используя PHP. 

<?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);
}

Подробнее о custom CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

0 голосов
/ 29 января 2020

Если вы действительно хотите использовать переменные S CSS, я могу придумать один способ.

Вам нужно будет сгенерировать файл S CSS, используя PHP перед его компиляцией.

Давайте представим, что вы получили этот массив из базы данных: 

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

Вы можете использовать эти данные для создания файла S CSS только с переменными. 

$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;

Теперь импортируйте этот файл в основной таблице стилей S CSS. 

@import 'variables';

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

, что приведет к следующему CSS при компиляции: 

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

Единственная проблема заключается в том, что вам придется повторно -компилировать все S CSS, если вы измените значение. Вы можете использовать Leafo s cssphp, чтобы сделать это на лету: https://leafo.net/scssphp/

0 голосов
/ 24 января 2020

Вы можете сохранить выбранные значения в вашей БД и перезаписать ваши внешние css встроенными стилями на необходимые элементы: 

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