Here's a generic example:
css // Begin CSS
( "selector1" )
({
property1: value,
property2: value,
// ...
})
( "selector2" )
({
property1: value,
property2: value,
// ...
})
; // End CSS
Some less and sass features (Variables, Mixins, etc.): // Variable
var text_color = "black";
// Mixin
var dim = function( w, h ) {
return {
width: w,
height: h,
}
};
css // Begin CSS
( "div" )( dim( "10px", "10px" ) )
({
color: text_color,
})
( "span" )
({
color: text_color,
})
; // End CSS
And finally, since it's leveraging javascript this technique can modify styles dynamically (My goal): item_color_input.onsubmit = function( )
{
css // Begin CSS
( ".item" )
({
background: item_color_input.value,
})
; // End CSS
}
Frameworks like jQuery provide similar functionality by acting on the DOM. This can be slow (since it has to execute the selector in javascript) and doesn't affect future elements.The Code: css.js http://keithmajhor.pastebin.com/twCKCcHV
// ==============================================
// File: css.js
// Author: Keith Majhor <[email protected]>
// ==============================================
window.css = function( a )
{
var decl = { },
elem = { },
rule,
prop;
css = function( a )
{
if ( typeof( a ) === "string" )
{
rule = a;
if ( !decl[rule] )
{
decl[rule] = { };
elem[rule] = document.createElement( "style" );
document.head.appendChild( elem[rule] );
}
}
else if ( rule )
{
for ( prop in a )
decl[rule][prop] = a[prop];
var temp = rule + "{";
for ( prop in decl[rule] )
temp += prop + ":" + decl[rule][prop] + ";";
elem[rule].innerHTML = temp + "}";
}
return css;
}
return css( a );
}
All it does is maintain a hash for each selector and update a <style> tag whenever it's modified. As is it's 500 bytes, minified it's below 300.I hope this is useful to someone. If anyone has any insight into why this might be a really stupid thing to do, I'd love to hear it.