CSS mit fettfreiem Framework dynamisch ändern?

Question

Ich versuche, einige Shortcodes in meinem CSS zu verwenden, damit ich sie alle gleichzeitig mit fettfreien Variablen ändern kann.

Zum Beispiel aus meiner config.ini:

accentColor=8f0

Und in meinem style.css wäre:

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

in meiner view-Datei 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 ist in Ordnung und die anderen Shortcode-Änderungen funktionieren. {{@accentColor}} funktioniert nicht in der Datei style-user.php, funktioniert aber in header.htm einwandfrei. Was vermisse ich?

Gibt es einen besseren Weg, dies zu tun?

BEARBEITEN: Ich habe die .php im Stammordner anstelle des Ordners / ui / css abgelegt. Folgendes habe ich erreicht:

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

Und dann verwenden Sie in der CSS-Datei einfach die Vorlagenvariablen {{@accentColor}} wie gewohnt.

Answer 1

Style.css ist in Ordnung und die anderen Shortcode-Änderungen funktionieren. {{@accentColor}} funktioniert nicht in der Datei style-user.php, funktioniert aber in header.htm einwandfrei. Was vermisse ich?

Ich gehe davon aus, dass Sie das Rendering-System von F3 zum Rendern verwenden header.htm. Es sieht so aus, als würden Sie das Vorlagensystem nicht zum Rendern der CSS-Datei verwenden.

Ich würde vorschlagen, das Vorlagensystem und die Vorlagenvariablen (wie {{ @accentColor }}) zu verwenden. Dann können Sie die analysierten Vorlagendateien und / oder die resultierenden CSS-Dateien aus Leistungsgründen zwischenspeichern.

Ihr Code könnte dem folgenden Snippet ähneln:

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

Natürlich gibt es auch andere Lösungen. Ich würde entweder eine CSS-Route registrieren oder eine PHP-Datei bereitstellen, die F3 bootstrappt, um die CSS-Datei mit Ihren Variablen zu rendern.