Aggiungere variabili in file CSS

La tecnica per fare questo è molto semplice, basta chiedere ad Apache di effettuare il redirect dei fogli di stile in modo da eseguire uno specifico script PHP. Qeusto script non fa altro che leggere linea per linea e sostutuire le varie varibili definite dall’utente.

Vediamo i vari passaggi.

Prima cosa creamo una struttura di progetto semplice e aggiungiamo il file index.html nella directory radice del progetto.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  5. <title>Variables in CSS Files… It’s possible!</title>
  6. <link href=“css/styles.css” rel=“stylesheet” type=“text/css” />
  7. </head>
  8. <body>
  9. <h1>Variables in Stylesheets</h1>
  10. <p>It’s possible!</p>
  11. <p>With PHP and Apache URL Rewrite Mod</p>
  12. </body>
  13. </html>

Ora creare un file CSS con le variabili e inserirlo in una cartella di nome css.

  1. $font: arial, sans-serif;
  2. $main-color: #3D7169; $secondary-color: #000;
  3. h1 {
  4. font: 200% $font;
  5. color: $main-color;
  6. }
  7. p {
  8. background: $secondary-color;
  9. color: $main-color;
  10. font-family: $font;
  11. padding: 10px;
  12. }

Infine creare un file PHP vuoto di nome enhanced_css.php e un file vuoto .htaccess. Questo file sovrascrive le configuarzioni di default del server e viene applicata nella direcotory attuale e nelle sue sottodirectory.

A questo punto il progetto dovrebbe esere avere la seguente struttura:

Potete continuare leggendo l’articolo originale in inglese al seguente link.

LINK

2 commenti su “Aggiungere variabili in file CSS”

  1. L'omologa soluzione è quella di creare il CSS onfly modificando poi il content type dell'header dell'output del php (asp / cfm / …).
    Nel nuovo format dei CSS ci sarebbero anche quelle previste… ma chissà quando 🙁
    Se devo scegliere comunque la soluzione di un modello css su cui fare replace (come per le newsletter) è quella che mi piace di più!

Lascia un commento