ACSS

ACSS or Advanced Cascading Style Sheets is a convenient way to write CSS. It is mostly* compatible with CSS 2.1 and has a few additional features:

nested rulesets
selector grouping
style templates
constants & arithmetic
...

These are shortcuts for otherwise tedious typework and will help you maintain your code. In addition, the generated CSS is stripped of comments and most whitespace resulting in a smaller file than the handwritten equivalent.

As an example you can take a look at this page's ACSS file and the compiled CSS file.

*: ACSS is mostly compatible with CSS2.1 meaning you can use most CSS code as ACSS with minimal adjustments. However, a few parts of the specification are not compatible with ACSS (by choice). For example, @import should be replaced by @include.

Features

Nested rulesets

In ACSS you can nest CSS rulesets to reflect the structure of the document the sheet will be applied to:

p
{
	margin-bottom: 10px;
	
	a
	{
		color: blue;
		text-decoration: underline;
	}
}

This will be compiled to:

p{margin-bottom:10px;}
p a{color:blue;text-decoration:underline;}

The & selector

The & symbol represents the parent selector(s) for a nested ruleset. You can use it to further specify the selector, or to add elements in front of the selector (e.g. if these represent a special case of the current selector)

a
{
	font-weight: bold;
	
	&:hover
	{
		text-decoration: none;
	}
	
	strong &
	{
		color: #666;
	}
}

Selector grouping

CSS allows you to add multiple selectors to one set of property declarations, ACSS goes a step further and also helps you in those cases where parts of the selectors are the same:

(p, ul, table) a
{
	color: red;
}

Which is equivalent to:

p a,ul a,table a{color:red;}

Style templates

Sometimes you will find yourself constantly repeating the same properties. At those times you can use a style template to spare yourself the tedious typing, not to mention the painful task of keeping this repeated code synchronized.

Use the @style directive to define a style template:

@style hide_text
{
	text-indent: -9999px;
	overflow: hidden;
}

And the add-style property to apply it

h1
{
	background: url('header.jpg');
	add-style: hide_text;
}

You can also nest rulesets in a style and even use & in nested selectors.

Constants & arithmetic

You can define constants of many types...

$someint = 3;
$somestring = "foobar";
$somecolor = #ccc;

And you can then use them in property declarations:

a
{
	color: $somecolor;
	
	&:before
	{
		content: $somestring;
	}
}

ACSS also supports basic arithmetic. (reference forthcoming)

p
{
	margin-left: $someint*30px;
}

@include directive

@include can be used to divide your code into several files. It works similar to CSS's @import directive, except the file contents will be inserted during compilation.

License

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Requirements

The compiler is written in PHP5. However the generated CSS can (and should) be deployed as a static file.

Download

Version	Download	Released
0.1	acss-0.1.zip - beta preview	July 8th, 2009

Documentation

Good news: if you can write CSS, you can write ACSS. The extra features are demonstrated in the features section. There's really not a lot more to it.

You can also check out this page's ACSS file and its generated CSS file.

Using ACSS during development

The easiest way to use ACSS during development is to add the following lines to the .htaccess file for your site.

RewriteEngine on
RewriteRule	^(.+\.css)$	acss/compile.php?file=$1	[L]

This will invisibly redirect every request for a CSS file to the ACSS compiler. The ACSS compiler will access the same file but with the .acss extension.

Bugs

If you find or think you've found a bug, please email me.