php variable in css file

**dotJoon** · Apr 14, 2012 15:40

Code:

<?php
$widthVariable=200;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="widthVariable.css" rel="stylesheet" type="text/css">
    <title>widthVariable</title>
<style type="text/css"> 
.widthVariable {width:<?php echo $widthVariable ?>px;background-color:yellow}
</style>
</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.

Code:

<style type="text/css"> 
.widthVariable {width:<?php echo $widthVariable ?>px;background-color:yellow}
</style>

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

Code:

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

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 ?

**wonshikee** · Apr 14, 2012 16:16

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.

**ralph.m** · Apr 14, 2012 16:18

Try putting double quotes around the variable:

Code:

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

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

**dotJoon** · Apr 14, 2012 18:49

Originally Posted by wonshikee

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.

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?

**wonshikee** · Apr 14, 2012 19:04

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:

PHP Code:


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

index.php

PHP Code:


$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?

**John_Betong** · Apr 14, 2012 23:59

Try this:

#widthVariable.php

PHP Code:


<?php

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

  

  $widthVariable = '998px';

?>

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

#index.html

HTML Code:

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

User Tag List

Thread: php variable in css file

Thread Tools

Display

php variable in css file

Bookmarks

Bookmarks

Posting Permissions