La solution consiste n'ont pas à créer une variable CSS, mais à utiliser PHP pour créer des variables dans le code CSS.
Pour ce faire, nous allons utiliser l'écriture simplifiée de
<?php echo $variable_css; ?> en <?= $variable_css ?> .
Page page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Variable CSS - Cascading Style Sheets</title> <link rel="stylesheet" type="text/css" href="style.php" /> </head> <body> <h1>Variable CSS - Cascading Style Sheets</h1> <p class="color-1">Bloc de couleur n°1 - Variable CSS Cascading Style Sheets</p> <p class="color-2">Bloc de couleur n°2 - Variable CSS Cascading Style Sheets</p> <p class="color-3">Bloc de couleur n°3 - Variable CSS Cascading Style Sheets</p> </body> </html>
Page style.php et non style.css
<?php
header('Content-Type: text/css');
$color_0 = '#000000';
$color_1 = '#ff0000';
$color_2 = '#ff3300';
$color_3 = '#ff6600';
?>
* { font-family: sans-serif; }
h1 {
padding: 5px;
color: <?= $color_0 ?>;
border: 5px solid <?= $color_2 ?>;
background-color: <?= $color_3 ?>;
}
p.color-1 { color: <?= $color_1 ?>; }
p.color-2 { color: <?= $color_2 ?>; font-weight: bold; }
p.color-3 { color: <?= $color_3 ?>; font-style: italic; }