Как использовать php-переменные в css-файлах?

73
28 февраля 2022, 21:50

У меня есть файл style.css и php-страничка. Есть ли какой-то способ, чтобы использовать переменные, которые находятся в php-странице,например, $color = $000;, в css-файле. Например, в style.css:

body {
color: <?= $color ?>;
}
Answer 1

Для контроля стилей из кода/админки сайта

Если вы хотите корректировать из кода скрипта/админки сайта стили элементов, то нужно записывать переменные не в файл CSS, а добавить на странице куда планируете выводить переменные блок и в него всё записывать:

<style>
body {
    color: <?= $color ?>;
}
</style>

В вашем примере - (php страница и css файл к ней), то, что вы запишите в <style></style> страницы будет приоритетнее стилей из файла css. Потому вам не нужно переносить все содержимое style.css. Запишите только нужные строки.

Ещё вариант - генерировать через php css файлы с нужными переменными и сохранять на сервер в виде style.css. Костыльный метод, не рекомендую.

Для удобной разработки

Если же ваша цель - удобно разрабатывать ресурс, и переменные требуются для того, чтобы упростить процесс - используйте SCSS/SASS. Это позволит поместить, например цвет в переменную и дальше использовать переменную в стилях элементов. Что в дальнейшем позволит автоматически изменять цвет в одном месте, а не во всех строчках где он используется.

Примеры: https://smartideal.net/kak-podklyuchit-scss/

Нюансы: http://tpverstak.ru/sass-scss/

SCSS/SASS поддерживается всеми современными IDE.

Документация к phpStorm: https://www.jetbrains.com/help/phpstorm/transpiling-sass-less-and-scss-to-css.html

READ ALSO
переход с apache на nginx+php-fpm

переход с apache на nginx+php-fpm

Пытаюсь перейти на nginx+php-fpm с apacheСайт работает, но не работает ЧПУ

155
Как правильно отловить event в react/typescript?

Как правильно отловить event в react/typescript?

Есть метод, который меняет имя у добавленного объекта

78
babel не компилирует

babel не компилирует

настройки packagejson

75
Вставка изображения в DIV

Вставка изображения в DIV

Отлавливаю событие вставки изображения на элементе :

96