使用无脂肪框架动态更改 CSS？

Question

我正在尝试在我的 CSS 中使用一些短代码，这样我就可以使用无脂肪变量一次性更改它们。

例如来自我的 config.ini：

accentColor=8f0

在我的 style.css 中是：

.addToCart:hover {
    background-color: #[[accentColor]];
}

在我的 header.htm 视图文件中：

<link rel="stylesheet" href="{{@BASE}}/ui/css/style-user.php">

style-user.php:

<?php
    header("Content-type: text/css; charset: UTF-8");
    $fullpath='http://'.$_SERVER['SERVER_NAME'].'/ui/css/style.css';

    if(file_exists('style.css')){
        $search=array('[[accentColor]]','[[protectPhotoOpacity]]','[[protectPhotoPosition]]');
        $replace=array('{{ @accentColor }}','0.3', '30');
        echo str_replace($search,$replace,file_get_contents($fullpath));
    } else {
        echo "body {background-color: white;}";
    }
?>

它发现 style.css 很好，其他短代码更改正在工作。 {{ @accentColor }} 在 style-user.php 文件中不工作，但在 header.htm 中工作正常。我错过了什么？

有没有更好的方法来做到这一点？

编辑： 我将 .php 放在根文件夹而不是 /ui/css 文件夹中。这是我最终得到的结果：

<?PHP
    $f3=require('lib/base.php');
    $f3->config('options.ini');
    $f3->set('CACHE',TRUE);
    echo Template::instance()->render('ui/css/style.css','text/css');
?>

然后在 css 文件中，像往常一样使用 {{ @accentColor }} 模板变量。

Answer 1

它发现 style.css 很好，并且其他短代码更改正在工作。 {{ @accentColor }} 在 style-user.php 文件中不工作，但在 header.htm 中工作正常。我错过了什么？

我假设您正在使用 F3 的模板系统来渲染 header.htm。看起来您没有使用模板系统来呈现 CSS 文件。

我建议使用模板系统和模板变量（如{{ @accentColor }}）。然后，出于性能原因，您将能够缓存已解析的模板文件和/或生成的 CSS 文件。

您的代码可能类似于以下 sn-p：

<?php

// Setup F3 here.
// You could utilize the routing system or skip routing and return only the CSS file.
// I would prefer the routing system with a cached route.

echo Template::instance()->render(
    'style.css', // Your CSS file stored in one of the `UI` directories
    'text/css',
    [
        'accentColor' => '#123456', // Specify variables or forward variables from a configuration file
    ]
);

当然，还有其他解决方案。我要么注册一个 CSS 路由，要么提供一个 PHP 文件，该文件引导 F3 以使用您的变量呈现 CSS 文件。