XCSS is a jQuery plugin that is used to generate CSS from a JavaScript object (via code, an external file, or using AJAX).
A month ago, I had come across an interesting site that offers a Ruby program called LESS that is used to compile 'less' files into CSS. It features a syntax similar to CSS but also includes variables, mixins, nested classes, and operations. I wondered if you could so something like this using JavaScript.
Around the same time, I was working on a jQuery widget and was trying to figure out ways that I could slim it down (both in size and in the number of files needed). I toyed with the idea about incorporating my stylesheet directly into my code, as that would eliminate one external dependency, and decided to try and see if I could represent my CSS inheritance structures as a JavaScript object. It worked and I decided to expand on that idea in creating XCSS.
Below is a sample widget that I created whose styles are generated using XCSS:
And this is the JavaScript object that represents the CSS structure for the above widget (in this demonstration it is contained in a file and is loaded using AJAX):
'$backColor': '#eee',
'$inactiveColor': '#ccc',
'$foreColor': '#000',
'$borderColor': '#aaa',
'$borderRadius': '5px',
'.tab-container':
{
'margin': '30px 0 56px 0',
'width': '600px',
'>> .tab-nav':
{
'position': 'absolute',
'z-index': '1000',
'margin': '0 0 0 10px',
'padding': '0',
'list-style-type': 'none',
'>> li':
{
'float': 'left',
'margin': '0 5px 0 0',
'min-width': '75px',
'background': '$inactiveColor',
'border': '1px solid $borderColor',
'-moz-border-radius-topleft': '$borderRadius',
'-moz-border-radius-topright': '$borderRadius',
'-webkit-border-top-left-radius': '$borderRadius',
'-webkit-border-top-right-radius': '$borderRadius',
'font-family': 'Verdana, Arial, sans-serif',
'font-size': '10pt',
'text-align': 'center',
'>> a':
{
'display': 'block',
'padding': '0 10px',
'color': '$foreColor',
'outline': '0',
'line-height': '25px',
'text-decoration': 'none'
},
'.selected':
{
'background': '$backColor',
'border-bottom': '1px solid $backColor',
'font-weight': 'bold'
}
}
},
'>> .tab-panel':
{
'display': 'none',
'position': 'relative',
'top': '26px',
'padding': '10px',
'background': '$backColor',
'border': ' 1px solid $borderColor',
'-moz-border-radius': '$borderRadius',
'-webkit-border-radius': '$borderRadius',
'clear': 'both',
'.selected':
{
'display': 'block'
}
}
}
}
As you can see, the object nearly resembles the structure and inheritance that you'd use in CSS; the only exception being the use of the '>>'.
In CSS, the valid combinators are white-space, greater-than sign (>), plus sign (+), and tilda (~). XCSS exchanges the white-space combinator, which is used to select descendents, with the double greater-than signs (>>). This allows XCSS to distinguish between intending to select something like 'li .selected', which would match LI elements whose descendants have the class 'selected', and 'li.selected', which would match LI elements who have the 'selected' class.
XCSS parses the object and places the following rules into a new stylesheet on the page.
{
margin: 30px 0 56px 0;
width: 600px;
}
.tab-container .tab-nav
{
position: absolute;
z-index: 1000;
margin: 0 0 0 10px;
padding: 0;
list-style-type: none;
}
.tab-container .tab-nav li
{
float: left;
margin: 0 5px 0 0;
padding: 0;
min-width: 75px;
background: #ccc;
border: 1px solid #aaa;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align: center;
}
.tab-container .tab-nav li a
{
display: block;
padding: 0 10px;
color: #000;
outline: 0;
line-height: 25px;
text-decoration: none;
}
.tab-container .tab-nav li.selected
{
background: #eee;
border-bottom: 1px solid #eee;
font-weight: bold;
}
.tab-container .tab-panel
{
display: none;
position: relative;
top: 26px;
margin: 0 0 26px 0;
padding: 10px;
background: #eee;
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
clear: both;
}
.tab-container .tab-panel.selected
{
display: block;
}
That's it for now... later I'll go into more detail about how to use the XCSS plugin and how the XCSS objects must be structured and what kinds of things you can do with it.
Enjoy.
