style.php, automatkompilera less till css med lessphp

  • Författare
  • Meddelande
Användarvisningsbild

mos

dbwebb

  • Inlägg: 10913
  • Blev medlem: 10 nov 2011, 09:52
  • Ort: Ronneby / Bankeryd

style.php, automatkompilera less till css med lessphp

Inlägg18 apr 2012, 10:34

(Senast uppdaterad 2013-05-06)
Less är ett språk för att skriva mer avancerade css-konstruktioner: http://lesscss.org/

Less omvandlas till css-kod via någon form av kompilator. På less-hemsida beskrivs bla hur du kan omvandla less till css med en JavaScript-kompilator. Enkelt och smidigt. Detta exempel handlar dock om hur du gör serverside-kompilering med cachning i PHP. För detta använder vi en kompilator, byggd i PHP, lessphp: http://leafo.net/lessphp.

För att manuellt slippa kompilera less-koden varje gång man gjort ändringar så kan man göra ett PHP-skript som sköter det automatiskt. Följande exempel visar på en sådan hantering.

http://dbwebb.se/kod-exempel/lessphp/

Exempelkoden finns på github så vill du komma igång snabbt så kilar du iväg dit:

https://github.com/mosbth/stylephp

Exemplet fungerar ungefär så här:

1. PHP-skriptet, style.php, sköter den automatiska kompileringen av less till css. Låtsas att PHP-skriptet är själva stylesheeten och inkludera det i en webbsida.

Kod: Markera allt
  <link rel='stylesheet' type='text/css' href='style.php' />


2. I samma katalog finns less-stylesheeten style.less.

Kod: Markera allt
// Style using less
@width: 700px;
@color: #333;
@bgcolor: #a3a3fe;

// from bootstrap
.gradient(@startColor: #555, @endColor: #333) {
  background-color: mix(@startColor, @endColor, 60%);
  background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}

html{.gradient(@bgcolor, lighten(@bgcolor, 10%));}

body{margin:8px auto; width:@width;color:@color;border-left:4px double @bgcolor;border-right:4px double @bgcolor;padding:4px 1em 4px 1em;background-color:fade(#fff, 30%);
  h1{color:@color;border-bottom:1px solid lighten(@color, 50%);}
  p{color:@color;}
}

.content{padding:1em;background-color:fade(#fff, 60%)}

.footer{border-top:1px solid lighten(@color, 50%);font-size:smaller;padding-top:1em;;
}


3. När exempelsidan laddas anropas PHP-skriptet style.php som läser style.less, skapar en cache-fil, style.less.cache samt den resulterande css-filen, style.css, som slutligen returneras till webbläsaren. Om inga ändringar har skett så returneras antingen den cachade versionen eller header-koden 304 Not Modified.

Glöm inte att katalogen måste vara skrivbar för webbservern, så måste även filerna style.css och style.less.cache.

Klart.

När man sedan lämnar utvecklingsläget och går i produktion så kan man ändra länken till stylesheeten att peka på den genererade css-filen.

Kod: Markera allt
  <!-- <link rel='stylesheet' type='text/css' href='style.php' /> -->
  <link rel='stylesheet' type='text/css' href='style.css' />


Glöm inte att ändra tillbaka när du vill göra ändringar.

Felsökning av style.php görs enklast genom att direkt accessa filen och se vad den skriver ut, det bör vara den resulterande css-koden eller felmeddelanden om något gått fel.

Exemplets genererade css-fil ser ut så här:

Kod: Markera allt
html {
  background-color: #b7b7fe;
  background-image: -moz-linear-gradient(top,#a3a3fe,#d5d5ff);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#a3a3fe),to(#d5d5ff));
  background-image: -webkit-linear-gradient(top,#a3a3fe,#d5d5ff);
  background-image: -o-linear-gradient(top,#a3a3fe,#d5d5ff);
  background-image: linear-gradient(to bottom,#a3a3fe,#d5d5ff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa3a3fe', endColorstr='#ffd5d5fe', GradientType=0);
}
body {
  margin: 8px auto;
  width: 700px;
  color: #333;
  border-left: 4px double #a3a3fe;
  border-right: 4px double #a3a3fe;
  padding: 4px 1em 4px 1em;
  background-color: rgba(255,255,255,0.3);
}
body h1 {
  color: #333;
  border-bottom: 1px solid #b3b3b3;
}
body p {
  color: #333;
}
.content {
  padding: 1em;
  background-color: rgba(255,255,255,0.6);
}
.footer {
  border-top: 1px solid #b3b3b3;
  font-size: smaller;
  padding-top: 1em;
}


Testa själv att se vad som genereras: http://dbwebb.se/example/lessphp/style.php

Klipper in skriptet style.php som referens (kolla alltid github för senaste versionen).

style.php
Kod: Markera allt
<?php
/**
* Autocompiles a less-file to a css-file using phpless.
*
* Uses a cache-file before compiling. Uses gzip. Caches the resulting css-file by using a HTTP-
* header with Last-Modified.
* Read more on lessphp: http://leafo.net/lessphp/
* Read more on less: http://lesscss.org/
*
* @author Mikael Roos mos@dbwebb.se
* @example http://dbwebb.se/kod-exempel/lessphp/
* @link https://github.com/mosbth/stylephp
*
* 2012-08-21:
* Uppdated with lessphp v0.3.8, released 2012-08-18.
* Corrected gzip-handling and caching using Not Modified.
*
* 2012-04-18: First try.
*
*/
// Include the lessphp-compiler
include dirname(__FILE__)."/lessphp/lessc.inc.php";

// Use gzip if available
ob_start("ob_gzhandler") or ob_start();


/**
* Compile less to css. Creates a cache-file of the last compiled less-file.
*
* This code is originally from the manual of lessphp.
*
* @param string $inputFile the filename of the less-file.
* @param string $outputFile the filename of the css-file to be created.
* @returns boolean true if the css-file was changed, else returns false.
*/
function autoCompileLess($inputFile, $outputFile) {
  $cacheFile = $inputFile.".cache";

  if (file_exists($cacheFile)) {
    $cache = unserialize(file_get_contents($cacheFile));
  } else {
    $cache = $inputFile;
  }

  $less = new lessc;
  $newCache = $less->cachedCompile($cache);

  if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
    file_put_contents($cacheFile, serialize($newCache));
    file_put_contents($outputFile, $newCache['compiled']);
    return true;
  }
  return false;
}


// Compile and output the resulting css-file, use caching whenever suitable.
$less = 'style.less';
$css  = 'style.css';
$time = mktime(0,0,0,21,5,1980);
$changed = autoCompileLess($less, $css);

// Write it out and leave a response
if(!$changed && isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= $time){ 
  header("HTTP/1.0 304 Not Modified"); 
} else { 
  header('Content-type: text/css'); 
  header('Last-Modified: ' . date("D, d M Y H:i:s", filemtime($css)) . " GMT"); 
  readfile($css); 

...
..:
.... /mos

Vilka är online

Användare som besöker denna kategori: Inga registrerade användare och 9 gäster