Serving dynamic CSS with variables

The CMS Questions
1

OK, so I’m trying to get this PHP CSS variable thing set up. I have it working on my local machine, but so far no dice on the actual server. Basically this is a trick described here: How to Add Variables to Your CSS Files | Envato Tuts+ that allows me to use PHP variables in my css. To get it working on my local machine (via MAMP), I added

<?php header("Content-type: text/css"); ?>

to the top of each CSS doc, including panel stuff, and added

<IfModule mod_mime.c>
AddType application/x-httpd-php .css
</IfModule>

to the .htacess file. This works on MAMP, any tips on getting this to work on the server? (also, I’m only assuming this is what’s breaking the site, as everything but the css seems to be working)

Thanks!

2

If you want to work with variables, I would recommend using a CSS preprocessor like SASS.

3

If you actually want to generate dynamic CSS right on the server in real-time (and only then), you can use a Kirby route that sets the content-type header to CSS and outputs your dynamic CSS.

Otherwise using a preprocessor is way better and way faster because it saves a lot of time when the CSS file is requested (as it doesn’t have to be generated in real-time). The article you linked to is from 2009, and a lot has changed since then. :smile:

1 Like
4

On my homepage I use variable CSS to change the color (red, yellow, blue, green) randomly. This is how I solved it:

  • I’m using Sass/SCSS as preprocessor with the following files:
    • _color-scheme-1.scss, … , _color-scheme-4.scss containing the definitions for the color variables, like $spot: #XXXXXX etc.
    • several _XXX.scss using these variables, like background-color: $spot
    • a _main.scss including all the _XXX.scss files
    • style-1.scss, …, style-4.scss including on of the color scheme files and _main.scss
  • The preprocessor then generates four files: style-1.css, …, style-4.css
  • In my HTML I use PHP to generate a random number between 1 and 4 and load on of the preprocessed styles:
      <?php $colorID = rand(1,4) ?>
  <?php echo css('assets/css/style-'.$colorID.'.css'); ?>

The preprocessor only compiles file not starting with an underscore. I use the great CodeKit to do all the compiling in automatically in the background.

5

If you want an external linked CSS-file, with inline variables - served by PHP, use this;

<?php
  header("Content-type: text/css; charset: UTF-8");
  $color = 'f00';
?>b {
color : #<?php echo $color; ?>;
}

file : style.css.php

…and link that file from the header like you always do;

<link rel="stylesheet" type="text/css" href="style.css.php?v=2" media="screen" />

file : index.htm

When you have a markup / DOM like this;

<p>Guess what <b>color</b> I am...</p>

…the bold word will be plain red.

1 Like
6

Thanks for all the great replies! I kind of figured what I was doing was out of date and slightly janky. I’ll try out some of these suggestions.

7

I’ve gotten sass up and running using the terminal! I used http://sebastianpontow.de/css2compass/ to get started (I already had a site approaching completion).
It was a simple task to replace the php variables I had with sass variables.
I took a look at codeKit and it’s not quite my style, but looks like a good tool.

1 Like
8

I have a lot of fields in the panel that style the page dynamic.
To access the $page object i need to put in a snippet right !?
So I have a snippet file called style.php.
Now I am just :

<style>
    #www {
        background: <?php echo $page->color(); ?>;
    }
</style>

Is this a good solution or can I do something else that´s better ?

9

That’s just fine. You can also include the same code in the header.php snippet or in your template, there’s no need for a separate one.