256 Kilobytes

Using Variables in CSS with PHP

Articles in Style and Layout | By Hash Brown

Published 5 months agoMon, 21 Jan 2019 15:06:10 -0800

Ever wish you could use variables in CSS? Using PHP within CSS files is awesome for just that.

424 views, 0 RAMs, and 5 comments

One of the most requested features of CSS has been the ability to use variables.

There have been a huge number of workarounds for this, from things like SASS to complex brand guidelines that ultimately are just custom CSS frameworks. But if you don’t want to depend on loading 1000’s of lines of extra code or extra libraries that you only use a small portion of there is an alternative.

PHP can be used in CSS. Yes, PHP can be used in CSS.

So first, we’re going to look at how we can do this and then we’re going to look at the advantages of doing this as well as new doors it opens.

How to use PHP in CSS

The process is fairly simple. Just like with CSS we need to link a stylesheet.

<link rel='stylesheet' type='text/css' href='css/style.php' />

Within style.php we now need to add some details to our head so servers read this file as a text/css file. This is super simple.

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

We now have a PHP file acting and being read as a standard CSS file, so now we can move onto the advantages this brings and the basics in using it. If you have any real experience with PHP this will be very simple.

Within our PHP tags we can set up some variables.

<?php
    header("Content-type: text/css; charset: UTF-8");
    
    $primaryColour = “#ff5b00”;
    $linkColour = “#3333333”;
    $imgRoot = “https://domain.com/resources/images”;
?>

From here on in we can actually use these variables by using echo to put the variable where we need it.

<?php
    header("Content-type: text/css; charset: UTF-8");
    
    $primaryColour = "#ff5b00";
    $linkColour = "#3333333";
    $imgRoot = "https://domain.com/resources/images";
?>

nav.menu ul.primary-menu{
    background-color: <?php echo $primaryColour; ?>;
}

ul.primary-menu li a{
    color: <?php echo $linkColour; ?>;
}

#header{
    background-image: URL("<?php echo $imgRoot; ?>/header-bg.jpg");
}

It's as simple as this. 

It offers many advantages for developers in rapid development cycles. Changing the values for these variables could quickly totally alter the appearance of your web pages. 

But it also makes it far easier to "hack" together things that only PHP would let you do.

For example some of these possibilities include:

  • Changing the appearance of your website based on time of day or time of year
  • Detecting the device a user is on and serving them content based on this
  • Compress CSS with PHP
  • Only load styles required for the individual pages, further reducing file size for your users
  • Generating random background images or element styles 

One thing you could also do is simple A/B testing without massive frameworks and bloated libraries.

Download more RAM. 🐏 ⨉ 0 Posted by Hash Brown 5 months ago 🕓 Posted at 21 January, 2019 15:06 PM PST
Profile Photo - Hash Brown Hash Brown Internet Activist &... United State of Euro...
🗎 55 🗨 379 🐏 162
Staff
Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 151 🗨 782 🐏 216
Site Owner

Very nice, as they say.

One of the most requested features of CSS has been the ability to use variables.

By the way, there are basic variables in CSS, which can be used to store values like "purple" or "1px":

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 5 months ago 🕓 Posted at 21 January, 2019 16:30 PM PST

Sir, I can do you a nice SEO.

Profile Photo - Hash Brown Hash Brown Internet Activist &... United State of Euro...
🗎 55 🗨 379 🐏 162
Staff

I did not know this, I am a noob. We are all noobs...

Download more RAM. 🐏 ⨉ 0 Posted by Hash Brown 5 months ago 🕓 Posted at 21 January, 2019 17:58 PM PST

"THAT DOG IS GETTING RAPED" - Terry A. Davis

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 151 🗨 782 🐏 216
Site Owner

You can also use PHP to generate CSS variables:

<?php $colors = ["light"=>"green", "dark"=>"darkgreen"]; ?>
<style>
  :root {
    <?php foreach ($colors as $key => $val): ?>
      --color-<?= $key; ?>: <?= $val;?>
    <?php endforeach; ?>
  }
</style>
Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 5 months ago 🕓 Posted at 21 January, 2019 18:18 PM PST

Sir, I can do you a nice SEO.

Profile Photo - Hash Brown Hash Brown Internet Activist &... United State of Euro...
🗎 55 🗨 379 🐏 162
Staff

#killme

Download more RAM. 🐏 ⨉ 0 Posted by Hash Brown 5 months ago 🕓 Posted at 21 January, 2019 18:42 PM PST

"THAT DOG IS GETTING RAPED" - Terry A. Davis

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 151 🗨 782 🐏 216
Site Owner

I'd like to shoot up your school if you know what I mean.

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 5 months ago 🕓 Posted at 21 January, 2019 18:53 PM PST

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.