开发者

improve and simplify css with php parser

开发者 https://www.devze.com 2023-03-07 11:44 出处:网络
I want to improve css syntax in several ways such as: defining variables link-color1 = #fff mathematical computing

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 import开发者_StackOverflow社区ant 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.


Try SASS. It supports variables, mathematical computations, style inheritance and many more features. It's not implemented in PHP, but it generates static files.


Did you try CSS Crush?


you could include your css with php with:

<link href="style.php" rel="stylesheet" type="text/css" />

In your style.php you do:

header("Content-Type: text/css");

At this point you can use all the power of php to do what ever you want like:

<?php

 $rules = 'font-size:11px;padding:5px;';

?>

td { <?php echo $rules; ?> }

Addedum

Inheritance:

<?php

   $parent=array( 'td' => 'color:;padding;etc;'
                  'p' => 'other rules'
                   //> other rules
               );
?>

.inheritance {
    <?php echo $parent['td']; ?>
   //> other rules here
 }


i dont think this is a good idea, esp in a production enviornment, but if you insist on doing this, i would suggest just installing SASS and executing it from php using passthru()

http://sass-lang.com/

http://www.php.net/manual/en/function.passthru.php

Like this

<?php
$css_path = '/';  // location of your real css files
$sass_cmd = 'sass -f';  // sass cmd
passthru($sass_cmd . $css_path . $_GET['cssfile'];
?>

called via

cssparse.php?cssfile=xyz.css

if you want to get fancy you could use a rewrite rule to funnel all your *.css requests thru your PHP script.

eg:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} \.css$
RewriteRule   ^(.*\.css)$  cssparse.php?cssfile=$1

that way when you request /example.css in the browser, it gets rewritten as /cssparse.php?cssfile=example.css which calls SASS and returns the output


What you want to do just isn't a good idea. Every time a user loads your CSS file, it first has to go through the PHP function that generates the CSS file from your 'improved' version. It is only needed for, for example, social networking sites on which users can make custom layouts. Then the custom styles have to be loaded from a database and inserted into the CSS file using PHP.

For website without this functionality, after the CSS is parsed, there is no difference. Creating the CSS file had only been easier/more efficient for you.

Also, if your CSS has to go through a PHP parser, it is not possible to modify the CSS offline.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消