Estoy tratando de usar algunos códigos cortos dentro de mi CSS para poder cambiarlos todos a la vez con variables libres de grasa.

Por ejemplo, de mi config.ini:

accentColor=8f0

Y en mi style.css sería:

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

En mi archivo de vista 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;}";
    }
?>

Está encontrando style.css bien y los otros cambios de shortcode están funcionando. {{@accentColor}} no funciona en el archivo style-user.php pero funciona bien en header.htm. ¿Qué me estoy perdiendo?

¿Hay una mejor manera de hacer esto?

EDITAR: puse el .php en la carpeta raíz en lugar de la carpeta / ui / css. Esto es lo que terminé con:

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

Y luego, dentro del archivo css, simplemente use las variables de plantilla {{@accentColor}} como de costumbre.

1
bossturbo 31 ago. 2020 a las 22:48

1 respuesta

La mejor respuesta

Está encontrando style.css bien y los otros cambios de shortcode están funcionando. {{@accentColor}} no funciona en el archivo style-user.php pero funciona bien en header.htm. ¿Qué me estoy perdiendo?

Supongo que estás usando el sistema de plantillas de F3 para renderizar header.htm. Parece que no está utilizando el sistema de plantillas para representar el archivo CSS.

Propondría utilizar el sistema de plantilla y las variables de plantilla (como {{ @accentColor }}). Entonces podrá almacenar en caché los archivos de plantilla analizados y / o los archivos CSS resultantes por razones de rendimiento.

Su código podría tener un aspecto similar al siguiente fragmento:

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

Por supuesto, existen otras soluciones. Registraría una ruta CSS o proporcionaría un archivo PHP que arranca F3 para representar el archivo CSS con sus variables.

2
Rayne 1 sep. 2020 a las 18:25