styleCSS

styleCSS is a dynamic runtime CSS processor, with support for easier coding, variables and functions.

Import a file with styleFile("demo.style");. "demo.style" can be replaced with any file path you like, providing it is on the same domain and port as your webpage. You can import as many styleFile(filePath)s as you need, and the ones you import last will take priority. Please note you will need jQuery, which can be downloaded from below. To include it, along with this file, simply add the following to your page's <head> tag:</p>

<script src="jquery-min.js"></script>
<script src="styleCSS.min.js"></script>

The file acts the same as any normal CSS, except for some key improvements. First of all, semi-colons are optional! This means that this is allowed:

table {
	background-color: #F60
	border: 1px solid #39F
	width: 100%
}

However, if you want to have a multi-line property, then either put the split directly after a comma , or put a backslash \ at the end of the line. For example,

background: url(sheep.png) center bottom no-repeat,
	url(betweengrassandsky.png)\
	left top no-repeat

Another very useful feature is variables. There are two types, $rules and £rulesets. $rules are one line properties, and £rulesets are sets of rules. They are used like this:

@vars {
	$font-family1: 'Segoe UI', Helvetica, Calibri, sans-serif
	$font-family2: 'Ubuntu Mono', Monaco, monospace
	£text: {
		text-decoration: underline
	}
}

p, a {
	font-family: $font-family1
}

code, pre {
	font-family: $font-family2
	overflow-x: auto
}

h1, h3 {
	font-family: $font-family1
	£text
}

Even more useful that variables, however, are functions. They are defined in the @vars {…} block, and are dynamic versions of variables. They are defined like this:

$$text(): {
	£return: {
		font-family: $$font-family(sans)
		text-decoration: underline
		font-style: italic
	}
}

The example above shows a very simple code which takes no arguments and just returns a block of rules, in the same way as a £ruleset. However, the font-family rule takes another function as the property, which does take an argument. Although it has no quotes (they are not needed for the argument), sans is a string. Both strings and numbers can be passed as the argument. Inside them, they run styleScript, a very simple language designed just for this. It has three concepts, the $input, which is the argument, if statements, and return. There are two types of return, £return and $return. These act as normal variables, and are the output of the function. The if statement doesn't need brackets, and can test if the argument is equal to a string or another number, or if it is greater/less than (or equal to) a number. This is shown in the example below.

$$font-family(): {
	if $input="mono" {
		$return: 'Ubuntu Mono', Monaco, $inputspace
	}
	else if $input="sans" {
		$return: 'Segoe UI', Helvetica, Calibri, $input-serif
	}

	else {
		$return: serif
	}
}

My name's Xsanda, and I'd love it if you were to mention it if you use this tool!

Email me here

Download

@vars {
	$$font-family(): {
		if $input="mono" {
			$return: 'Ubuntu Mono', Monaco, $inputspace
		}
		else if $input="sans" {
			$return: 'Segoe UI', Helvetica, Calibri, $input-serif
		}

		else {
			$return: serif
		}
	}
	$$text(): {
		£return: {
			font-family: $$font-family(sans)
			text-decoration: underline
			font-style: italic
		}
	}
}

p, a {
	font-family: $$font-family(sans)
}

code, pre {
	font-family: $$font-family(mono)
	overflow-x: auto
}

h1, h3 {
	$$text()
}

span.string {
	color: red
}

span.maths {
	color: blue
}

span.var {
	color: purple
}

span.rule {
	color: fuchsia
}

span.function {
	color: teal
}

span.selector {
	color: maroon
}