Can we have more maths in calc()?

Hi,

The last few days I’ve been playing with ratios to define layouts and font-sizes, as explained in this recent article on A List Apart: http://alistapart.com/article/content-out-layout

With the theory in this article you can create layouts and typographic scales, like the example I created to illustrate what I mean: http://nerd.vasilis.nl/code/calc/power.html

I had to use a calculator to calculate the different flex-values. I was wondering why we couldn’t use the calculator we have in CSS. 

So Instead of writing this:

div {
    flex: 11.301754422787 1 11.301754422787px;
}

We could write something like this:

div {
    flex: calc(1.414 pow7) 1 calc(1.414px pow7);
}

If we want to use calc() to create this layout today we can do that, but it gets messy very fast

div {
    flex: calc(1.414 * 1.414 * 1.414 * 1.414 * 1.414 * 1.414 * 1.414) 1 calc(1.414px  * 1.414 * 1.414 * 1.414 * 1.414 * 1.414 * 1.414);
}

So far I’ve only found the need for exponents, but I’m sure there’s a use for more functions. 

Cheers,
Vasilis

Received on Sunday, 6 April 2014 19:26:57 UTC