Css3 evaluatable expressions?

Are there any techniques that allow for expressions in css3 statements?

Frequently it is helpful to do such things as width: 35%+20px or similar. Right now the only solutions I have to these circumstances are to either redesign the page or to use javascri开发者_如何学Cpt to dynamically set the css.

The CSS working draft on values and units specifies a calc function, though it is only supported in the latest versions of IE and Firefox.

unfortunately CSS3 calc() is not quite ready yet ;)

Quote from the specs:

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
  border: solid transparent; border-width: 2px 1px;
}

p:hover { border-color: yellow; }

while it's scary that evaluation expressions may be allowed in CSS (it's not a programming language) it's exciting that something as simple as "take-away" might be used.. but then again there is the "box-sizing" property, so perhaps it's not necessary - to do otherwise is perhaps losing the KISS principle?

The calc() function can be used wherever length values are allowed. This is defined in CSS3 Values and Units (see http://www.w3.org/TR/css3-values/). I don't know what browser are supporting it.

section {
   float: left;
   margin: 1em; border: solid 1px;
   width: calc(100%/3 - 2*1em - 2*1px);
}

p {
   margin: calc(1rem - 2px) calc(1rem - 1px);
   border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }

dicejs.com (supposedly stands for dynamically injected css engine) A client-side version of SASS. Pretty slick and allows real time manipulation of variables and functions. The plugins are rudimentary for colors and CSS3 but you could easily write your own because it's all in javascript. I think this is a nice way to get around waiting for CSS specifications to be supported in major browsers.

Yes, and it's called Sass.

http://sass-lang.com/