Php variable in css file

PHP
1 
[COLOR="#008000"]<?php
$widthVariable=200;
?>[/COLOR]
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="[COLOR="#FF0000"]widthVariable.css[/COLOR]" rel="stylesheet" type="text/css">
    <title>widthVariable</title>
[COLOR="#0000FF"]<style type="text/css"> 
.widthVariable {width:[COLOR="#008000"]<?php echo $widthVariable ?>[/COLOR]px;background-color:yellow}
</style>[/COLOR]
</head>  
<body>
<div class="widthVariable">
myDiv
</div>
</body>
</html>

In the code above, I can change the width of div by changing the $widthVariable.

I like to remove the part below in the page above.

[COLOR="#0000FF"]<style type="text/css"> 
.widthVariable {width:[COLOR="#008000"]<?php echo $widthVariable ?>[/COLOR]px;background-color:yellow}
</style>[/COLOR]

Instead of removing the code abvoe, I like to put the code below into the widthVariable.css.

[COLOR="#0000FF"].widthVariable {width:[COLOR="#008000"]<?php echo $widthVariable ?>[/COLOR]px;background-color:yellow}[/COLOR]

But the green part of the code in widthVariable.css doesn’t work because it’s PHP code in css file.

Is there any way to make php code in a css file do work ?

2

You would have to parse a non css file and do a replacement.

Alternative is 3rd party CSS replacements software, like LESSC or SASS, which provides variables and other useful features.

However if you’re bent on not using those, you could do something like

.widthVariable { width: {widthVariable}px;background-color:yellow }

Then run the non-css file through PHP and str_replace {widthVariable} with an actual value, then the resulting data gets saved onto an actual css file.

Hope that makes sense.

3

Try putting double quotes around the variable:

.widthVariable {width:<?php echo [COLOR="#FF0000"]"[/COLOR]$widthVariable[COLOR="#FF0000"]"[/COLOR] ?>px;background-color:yellow}

EDIT: this implies that this is in the HTML page itself, not in the CSS file.

4

I have 2 files which are index.php and widthVariable.css.
What is the non-css file between index.php and widthVariable.css?
Do you mean index.php?

5

You need a faux css file, that holds your unparsed CSS, then the real CSS file will be a parsed version. It could technically be a .css file as well, but the point is - it’s not the one you serve w/ your website.

This should illustrate it better:

style.css.php:


.widthVariable { width: {widthVariable}px;background-color:yellow }

index.php


$css = file_get_contents('style.css.php');
$css = parse_css($css); # function that swaps the tokens for real values
file_put_contents('style.css', $css);
# ... blah blah blah

Then you serve style.css, which isn’t the raw data file. Does that clear it up a bit?

6

Try this:

#widthVariable.php


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

  $widthVariable = '998px';
?>
.widthVariable {width:<?php echo $widthVariable ?>px;background-color:yellow}

#index.html



<head>
  <meta charset="UTF-8">
  <link href="widthVariable.php" rel="stylesheet" type="text/css">
    <title>widthVariable</title>
</head>
<body>