Search code examples
phpcssparsingsimplification

improve and simplify css with php parser

I want to improve css syntax in several ways such as:

  • defining variables
    link-color1 = #fff
  • mathematical computing
    width:500-3-2 this seemy stupid but with variables:
    width: container - inner - 3px;
  • style extending
    #foo{background:#ddd;color:#eee;} #bar {@extend: #foo;color:#fff;}
  • cross-browser features
    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; replace to
    border-radius:3px;

these are only examples, my ideas, but the library can be different

I am looking for a php library which parses a file which sytax is similar to css, and generates a valid css document.

This is important that I dont want to insert php sytax into my css file because:

  • PHP looks complicated and ugly
    #foo {color:<?php echo $color1; ?>;}
  • Notepad++ gets absolutely confused. Me too

SASS is very good solution for offline work, but i still search for PHP solution because:

  • The improved css files would be available for the other developers so they can modify and test it. For a larger community php-parser used on the server is an easier way.
  • PHP can also be resource sparing with a simple revision system based on file modification date and hashcodes.

Here is an example what i wrote: php parser at /css/index.php

usage:

@color1: #1a1a1a;
@color2: #444444;

div#container {background:@color1;}
div#inner {background:@color2;}

the HTML link:

<link rel="stylesheet" type="text/css" href="/css/?main.css" />

This works only with colors. I need a parser for the listed options.

Solution

  • LessPhp

    Thanks to @Kru I found Less.js which is a very nice and clever css parser, but as I said the best solution would be PHP. After a little search on forums and google I found LessPhp which is a PHP port of Less.js

    Documentation can be found here.

    LessPhp is also on github.