Define Variables in CSS

Each of us webdesigners needs to use many or a few different color codes on many places in their .css-files. I know the pain of changing one basic color on all places – find and replace is a lifesaver, but if you get used to following, you don’t even need to do that.

In this tutorial you will learn how to let your webserver parse your .css-file, inserting the right colorcodes at the right places.

CSS vs. PHP

Even if you don’t know PHP, please don’t be frightened – you just need two lines of code to learn by heart, which you will need a lot, and two lines of code once for each document you want to use this way.

If you know PHP already, go directly to the solution-section.

It’s true, CSS cannot handle variables itself. There is no way to define variables in CSS itself. But: PHP is able to define variables or constants, just as you like, and I will show you, how to us it. Nearly each webserver is able to parse .php-documents but they won’t do it without some hint: you need to end all files which should be parsed as php with „.php“ Your „style.css“ will look like „style.css.php„.

Why does this work and how does a webbrowser know, it’s CSS?

When a .php-file is „parsed“ it means that the webserver will search the complete file for PHP-areas, execute the commands defined in these PHP-areas and put together all outputs into one single text. To know that the result of any php-parsing is plain text is important to understand why a webbrowser is not confused by any PHP-files as long as the webserver is able to do PHP. (Your webhost will tell you, if your webserver is able to do PHP).

When someone requires a website, the server sends the information to the webbrowser. This information is just plain text – it will be interpreted by the webbrowser depending on its ‚content-type‘. So, in theory, the server can give any text to the webbrowser and say it’s CSS – the browser will believe the documents ‚content-type‘. Therefore, we just need to tell the webbrowser the text sent from our webbrowser should be interpreted as CSS.

So, how do I use PHP now?

I’m suggesting, your webserver can do PHP.

I recommend to create a file called „colors.php“ into the same folder as your „.css“-files.

I will show you the very basics of PHP so you can use my technique without any problems for your color-definition:

<?php
?>

An PHP-Area is defined by opening „<?php“ (must be followed by a space) and closing „?>“. Everything between will be parsed by your webserver as I told you earlier.

As you see in the next example, each line must end with a semicolon (;).

The next example shows you two strings, marked by one ‚ before and after the string. Be aware that it makes a difference wheter or not you leave a space after or before the ‚-sign. Its something different to write ' #0000FF ' or '#0000FF'

<?php
define(‚BLUE‘, ‚#0000FF‘);
$blue = BLUE;
?>

There are two different ways to store your color-codes. You can chose!

define()“ is a function provided by PHP itself which declares a constant. A constant is a set of characters which can be written instead of its value throughout the code. In the second line „$blue = BLUE;“ the webserver will replace BLUE with ‚#0000FF‘ (including the ‚-signs!). SO – whereever you use BLUE, the color-code will be written.

What is positive about CONSTANTS? As the name already says: you cannot change the value of it during one parse session. When you write the file and someone requests it, the server will take the file at in its momentary state and will parse it. During the parsing process CONSTANTS cannot be changed by any calculations in the code. If you change the file and save it, the changes will apply from the next request to the next change of the file.

Every variable is marked by an „$“ sign and has its unique name. You can imagine these variables as boxes with names – the box in my example is called „$blue„. Whatever I will give into „$blue“ will replace what was in it before. In our example in line „$blue = BLUE;“ the variable called „$blue“ will get a value (marked by „=„). This value is BLUE. As we learned in the paragraph before, BLUE is a defined CONSTANT and therefore will be replaced with '#0000FF' during the parsing process. The line looks like: „$blue = '#0000FF';“ in the end. Please note the ‚-signs before and after #0000FF.

Okay, I know enough of PHP, what do I really need?

You need the defination of the colors: I recommend to have your own file (ie. colors.php):

<?php
// Blue (this is a comment and will not affect anything nor will it be seen in your .css)
define(‚BASE‘, ‚#BAE7FF‘);
define(‚DARK‘, ‚#546873‘);
define(‚MIDDLE‘, ‚#D0EAF6′);‘
define(‚LIGHT‘, ‚#E0F4FF‘);
?>

You will also need your CSS-file (ie. style.css.php). You MUST name it .php in the end. You do not have to name is .css.php but it is recommended for recognition and readability.

<?php
header(„Content-Type: text/css“);
require_once(‚colors.php‘);
?>
/* CSS Document can begin here */
/* you write styles normally and only insert special-color-lines*/

body {
background-color: <?php echo BASE; ?>; /* do not forget about the semicolon at the end of line for CSS */
color: <?php echo LIGHT; ?>; /* do not forget about the semicolon at the end of line for CSS */
}

All emphasised lines should be known by heart.

The header-command tells the webbrowser that the resulting plain text should be interpreted as CSS.

The require_once-command makes all code from the file awailable. In this case your file ‚colors.php‘ which has to be in the same directory as your style.css.php.

The <?php echo ____; ?> is the command what you are waiting for the whole time: this command inserts the color-code you desire by NAME. You can access all NAMES defined in the colors.php – and you may define some colors in the PHP-section of this file, too.

 

I would be pleased if you leave any comments. Please tell me whether you liked it, found it helpful or have and helpful critics.

Advertisements
  1. No trackbacks yet.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: