Mechanical CSS

Mechanical CSS is an extension to the CSS syntax which allows for a more modular and hack free system, MCSS currently runs through a PHP program which converts custom syntax enhancements into valid CSS. Currently the language allows for server-side imports, custom rule defining, variables and automatic compression via flags.

Server-Side Imports

Server side imports are done by using: @include "file.mcss"; this is very similar to CSS’ @import "file.css"; however it is a) included on the server before going to the browser for performance but b) allows for you to stick custom rules in a separate file as it is also passed through MCSS.

Custom Defined Rules

Custom defined rules are a way of creating clean re-usable code for within CSS, the idea has been around for a while including support in SAAS and LessCSS (in both libraries they are called mixins). The main difference that separates Mechanical CSS from SAAS and LessCSS is that rules in MCSS can have parameters just like usual CSS rules. An example of the syntax is below:

@rule border-radius: tl tp br bl {
	border-radius: var(tl) var(tp) var(br) var(bl);
	-moz-border-radius: var(tl) var(tp) var(br) var(bl);
	-webkit-border-radius: var(tl) var(tp) var(br) var(bl);
}

h3 {
	background: blue;
	border-radius: 5px 0 5px 0;
}

h5 {
	background: blue;
	border-radius: 10px;
}

This (re)defines the rule border-radius which accepts 4 arguments, which can then be used just like any normal CSS rule. This particular rule makes using the CSS3 border radius compatible with the main browsers which use custom names keeping your main CSS clean. If you use the rule with less arguments then defined then remaining rules will be erased. The output from the example above becomes the output below:

h3 {
	background: blue;
	border-radius: 5px 0 5px 0;
	-moz-border-radius: 5px 0 5px 0;
	-webkit-border-radius: 5px 0 5px 0;
}

h5 {
	background: blue;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Variables

Variables in MCSS follow the proposal Daniel Glazman and David Hyatt, variables are defined in @variable blocks, you can have as many variable blocks in a single page as you wish, when needed you can wrap the variable in a var block:

@variables {
	primaryColour: #333;
	secondaryColour: #AAA;
}

body {
	background: var(primaryColour);
}

Flags (compression)

MCSS comes with the ability to set certain flags for MCSS to read, these can change the way MCSS works on the CSS or be used for simple macros, currently there is only one flag available which is "compress" this makes MCSS compress the final CSS into a production ready optimized format. Useful for saving bandwidth and download time. To use it:

@flags {
	compress: true;
}

Development

Mechanical CSS is still in active development and this is designed to be just a preview of what is currently available.