Link Details

As I already said elsewhere... that proposal (this implementation is based on) lacks math ops. I really hate having to write stuff like this:
padding-right:239px; /* RC fullwidth + CC padding */

How would you see that happening?

.left { width:245px; }
.right { width:185px; }
.middle { width:expr(.left.width + .right.width) }

?

//comments like this get stripped from the output

/*comments like this remain*/



//assignments outside selectors=variables

//unit aware variables that is

LC_width:180px;

LC_hpadding:10px;

CC_hpadding:20px;

RC_width:130px

RC_hpadding:10px;

LC_fullwidth:LC_width+LC_hpadding;

RC_fullwidth:RC_width+RC_hpadding;



body {

  //the assigned stuff gets split into tokens with space as delimiter

  //since there is no space this whole thing is evaulated to 630px

  min-width: 2*(LC_fullwidth+CC_hpadding)+RC_fullwidth;

}



#container {

  padding-left: LC_fullwidth;

  padding-right: RC_fullwidth+CC_hpadding;

}



#container .column {

  position: relative;

  float: left;

}



#center {

  padding: 10px CC_hpadding;

  width: 100%;

}



#left {

  width: LC_width;

  padding: 0 LC_hpadding;

  right: LC_fullwidth+CC_hpadding;

  margin-left: -100%;

}



#right {

  width: RC_width;

  padding: 0 RC_hpadding;

  margin-right: -100%;

}



#footer {

  clear: both;

}

That would be pretty easy, might have something for you tomorrow (assuming you use PHP).

Have to throw an exception if you were adding units of differing types, eg. 2em + 20px + 10%

I'd also probably stick with eval(expression) syntax to keep it consistent with var(), eg:

#right { width: eval(RC_width * 2); }

It's up there. You can now do:

@variables {

    lc_width: 240px;

    rc_width: 180px;

    all_padding: 20px;

}



#some_div {

    width: eval((lc_width+rc_width)-(all_padding*2));

    padding: eval(all_padding/2);

}

Err *can't* add variables of different measurement types.

You can also display error messages by injecting em into the CSS like this:

body:before{

  content:'line one\A line two';

  border:2px solid #f00;

  background:#fff;

  text-align:left;

  font-size:14px;

  font-family:'courier new',courier,monospace;

  margin:0;

  padding:5px;

  display:block;

  white-space:pre;

}