eXtensible Cascading Style Sheets (xCss)

What is xCss?

xCss is simply standard Cascading Style Sheets (CSS) markup, with some extra capabilities added in. Within your standard CSS file, you can add xCss markup to enhance and dynamically adjust the content of your CSS file. This lets you change colors, fonts, border attributes, and more after your website has been built and uploaded to the webserver.

xCss offers three types of markup constructions;

Variable values

You can centrally define common styles that are re-used through your CSS file, such as colors;

$param color bgColor1 red

p {
	background-color: $bgColor1;
}

li {
	color: $bgColor1;
}

$param color bgColor1 red

p {
	background-color: bgColor1;
}

• Insert variable values, which are defined centrally
• Insert parameter values, which can be passed in through the URI querystring
• Perform function-based calculations
• Such as darkening or lightening a color by a specific amount

In addition to these, here are a number of future capabilities planned as well.

What is xCss used for?

xCss generates standard CSS, and is therefore usable on any website, anywhere. However, xCss is most valuable in projects & environments that use "skins" or "themes" to style websites.

Using xCss, a "theme" developer can create a full skin design, and then the user can easily vary things such as;

• The color palette used
• The fonts used
• The size and position of key elements in the layout
• The exact portion of the web page to which the CSS file applies

Comments support using //

Documentation support using ///

Elimination of { and } grouping

Large grouping to apply to e.g. ID'd elements

Variables

Parameter support from querystring

Basic formula processing for positions and size calculations

Basic formula processing for color adjustments

e.g. Darken & Lighten

Source line numbering on rendered output to allow matchup