Mathematically-Augmented Recursive Stylesheets

A (currently theoretical) CSS preprocessor that allows complex math to be performed and rules to be placed within rules, while still looking much like CSS3.

Responsive Button Example

The following selector selects all buttons, colors them orange, makes their text the same color as link text, gives them 0.5em padding on top and bottom and 1em padding on left and right, and sets the width to be 100% of its parent, minus its left and right padding. It then says that, on hover or focus, the background should change to lightblue, and on mousedown, it should be black with white text. Then, it shows a selector that styles all heading elements (H1 - H6), and anything with the .heading class which is in a HEADER, but only when those have the .plain class.

Initial (.MARS)

*:link {
	color: orange;
}

button,
input[type=("button","submit","reset")] {
	background-color: white;
	color: match(*:link);
	padding: 0.5em 1em;
	width: ?(100% - prop(padding-left) - prop(padding-right));
	
	:hover,
	:focus {
		background-color: lightblue;
	}
	:active {
		background-color: black;
		color: white;
	}
	
	(max-width: 1024px) {
		font-size: 80%;
	}
}

header (h1, h2, h3, h4, h5, h6, .heading).plain {
	background: match(h1);
	margin: 0;
	padding: 0;
}

Processed (.CSS3)

*:link,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	color: orange;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	background-color: white;
	padding: 0.5em 1em;
	width: calc(100% - 1em - 1em);
}
	button:hover, button:focus,
	input[type="button"]:hover, input[type="button"]:focus,
	input[type="submit"]:hover, input[type="submit"]:focus,
	input[type="reset"]:hover,  input[type="reset"]:focus {
		background-color: lightblue;
	}
	button:active,
	input[type="button"]:active,
	input[type="submit"]:active,
	input[type="reset"]:active {
		background-color: black;
		color: white;
	}
	@media (max-width: 1024px) {
		button,
		input[type="button"],
		input[type="submit"],
		input[type="reset"] {
			font-size: 80%;
		}
	}

header h1.plain,
header h2.plain,
header h3.plain,
header h4.plain,
header h5.plain,
header h6.plain,
header .heading.plain {
	background: transparent;
	margin: 0;
	padding: 0;
}

Output example

Demo heading (4)

Demo link