Can we have more maths in calc()?


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:

With the theory in this article you can create layouts and typographic scales, like the example I created to illustrate what I mean:

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. 


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