PCSS

PCSS: Shortcut-oriented Server-side CSS3 Preprocessor

Unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables.

PCSS is a PHP-driven CSS preprocessor. It aims on helping developers write CSS code.

PCSS features: PCSS do server-side processing using PHP 5, so it requires this version to be available on the server where the website is running.

Code example:

&mygreen = #f56; &boxdefault = display:block; float:left; unit em imgdir css/images #id { BLOCK; SIZE:80 80; BGPOS:80 0; BGIMG:image.gif; color:&mygreen; } .class { BLOCK; .css { BOUNDS:10,20 20; .aaa { &boxdefault; RADIUS:30; } } }

Resulting CSS in Firefox Browser (spaces and newlines were added for demonstration purposes):

#id { display:block; width:80em; height:80em; background-position:80em 0em; background-image:url(css/images/image.gif); color:mygreen; } .class { display:block; } .class .css { padding:10em; margin:20em 20em; } .class .css .aaa { display:block; float:left; border-radius:30em; -moz-border-radius:30em; }

Download

Click here to download version: 0.71 (fontface bug fixed)

Constants reference Functions reference

Documentation

How to use PCSS

Download the package and use it, nearly as simple as that. Put the pcss.php file in your website directory and embed it in link tag or use @import just like an ordinary CSS file:

<link rel="stylesheet" type="text/css" href="pcss.php?css=file.css" />

or

<style type="text/css">@import url(pcss.php?css=file.css);</style>

This is the simplest way to use PCSS but if you want to make CSS bundles, for example, the advanced usage section gets into an alternative way of using PCSS.

Variables

Variables can be declared anytime, preceded by "&", this way:

&[variable_name] = [value];

For example:

&mycolour = #fff;
&floatedbox = display:block; float:left;

Variables may hold CSS pure data and CSS values. To use the variable inside the CSS declarations, simply use the variable name prepended by "&". The semi-colon ";" at the end is optional

Define defaults

The default values for units and image directory (used for BGIMG PCSS function) can be, too, given anytime and are defined this way:

unit [unit]
imgdir [dirname]

For example:

unit em
imgdir images

unit %
imgdir ../

If these two values are not defined, the defaults are: blank for imgdir and "px" for unit. The terminal slash on the directory name is not necessary.

@font-face shortcut

To save up precious time when making @font-face statements, do like this:

fontface [fontname] [fontfiles]

For example:

fontface MyFont dir/myfont-file

In this case above, the @font-face generated declaration will be:

@font-face{
  font-family:'MyFont';
  src:url('dir/myfont-file.eot') format('eot'),
  url('dir/myfont-file.woff') format('woff'),
  url('dir/myfont-file.ttf') format('truetype');
}

Note that you will have to, in this case, have all font files with the same name (except for the file extension, of course) and in the same directory.

Nesting and server-side Comments

To do nesting, simply put class definitions inside each other, like:

.class{ BLOCK;
  .subclass{ HIDE; }
}

It will then generate nested declarations, like this:

.class{
  display:block;
}
.class .subclass{
  display:none;
}

Be careful to not to nest too many classes and make the CSS bigger than it should be.

To comment in PCSS init the line with two slashes, like it is done in PHP. These syntax cannot be used after other content. These comments are not reproduced in final generated CSS file, in contrast with the behaviour we see on normal CSS comments, which can be used as well.

// this is a comment

Constants

Constants are predefined strings that replace longer CSS commands and selectors with short words. Look at this first example:

.class{
  HIDE;
}
.class{
  display:none;
}

The constant HIDE is a short form of display:none. Constants can also be used for selectors:

.class FILE{
  HIDE;
}
.class input[type=file]{
  display:none;
}

The constant FILE is a shortener for input[type=file].

To check out all PCSS constants click here.

Functions

Functions are enhanced CSS-like statements, that may use server-side user agent (browser) detection to provide shorter optimized CSS content, enhance CSS statements frequently used or just shorten CSS statements.

.class{
  FSIZE:14;
}
(given default unit is "px" or no default unit was chosen).class{
  font-size:14px;
}

Above, the function FSIZE is used as a short form of font-size, with the advantage of using the default unit (in this case, if the default unit was "px", for example, the generated code inside "class" would be font-size:14px). See another example:

.class{
  BOUNDS:5 10,0 0 10;
}
(given default unit is "px" or no default unit was chosen).class{
  padding:5px 10px; margin:0 0 10px;
}

The function BOUNDS aggregates margin and padding in one statement, using the default unit as well. One more:

.class{
  BGIMG:someimage.png;
}
(given default imgdir is "images").class{
  background-image:url(images/someimage.png);
}

Above, the function BGIMG is a shortener for background-image, but using the default imgdir to make even shorter calls possible. Last example:

.class{
  GRADIENT:#fff #000;
}
.class{
  background-image:-moz-linear-gradient(top, #fff, #000); background-image:-moz-linear-gradient(top, #fff, #000);
}
.class{
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', EndColorStr='#000');
}

The function GRADIENT is a shortener for background-image with gradient mode and uses server-side browser detection to generate the right content for the reader. It means that if the user was viewing the website on a Firefox browser it would generate the first resulting code, but if the user was viewing the site on MS Internet Explorer 9 and lower it would generate the second one, as an example. The function ROTATE even does the calculation to generate the necesaary Matrix to do the rotation in MS Internet Explorer.

To check out all PCSS functions click here.

Advanced usage and more
Advanced usage

PCSS is capable of being used in a very straight-forward way, explained above. It can be used, too, in another way, this one being more suited for CSS bundles. You can merge many CSS files (PCSS files, actually) in one resulting output:

<?php

include "pcss.php";
print new PCSS("file1.pcss");
print new PCSS("file2.pcss");
print new PCSS("file3.pcss");

?>

Apache mod_rewrite optimisation

For the basic usage, Apache mod_rewrite can be used to turn the composed PCSS URL into a more friendly output. If your web hosting provides Apache and full access to .htaccess file, you can do the following in .htaccess file:

RewriteEngine on
RewriteRule ^([a-zA-Z0-9_-]+).p.css$ pcss.php?css=$1

If you implement this, you will be able to replace a reference like pcss.php?css=file.pcss for something much better. In this case it would be file.p.css, but it can be fully customized.

PCSS Errors

Unlike pure CSS, if the PCSS file is somehow malformed, an error will be thrown and nothing will be output but the error. To avoid errors, try to always end your statements with the semicolon (;) and check nesting syntax.

Customize PCSS

The PCSS code is free for you to improve it and fit your needs, you only need to have some basic PHPOO knowledge. Contact me if you have further questions.

About PCSS

PCSS was developed by Marcos Sandrini. To leave a contact message, use the e-mail address "msandrinidesign at gmail" (dot com, of course) or the twitter @gestalterblog

Please visit der neue Gestalter, my blog.

Legal terms

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License. I must say that PCSS has no warranties of any kind and you are free to share your own version of PCSS, as long as you give credit to me.