SASS Math Calculation

Question

Trying to create a responsive grid of videos. Instead of using different %'s for each media query, I was hoping to use a standard SASS formula that calculates based on 100% width, however not sure if SASS can do this. The 40 in the below formula, takes into account 2 x 20px fixed margins (i.e this would be a 3-column grid).

Ideal formula:

ul.videos {   li {      width: ((100% / 3) - 40);   } } 

Any way that CSS/SASS can handle this? Would prefer not to use JS if possible.

Answer 1

This is possible in all major browsers using calc().

Demo: http://jsfiddle.net/gb5HM/

li {     display: inline-block;     width: calc(100% / 3 - 40px); } 

Of course, you can still declare this in a SASS file but it's a pure CSS solution. It's not possible in SASS because SASS doesn't know what 100% is at the time the stylesheet is generated, and the pixel value of 100% can fluctuate as the document is resized.

Spec: http://www.w3.org/TR/css3-values/#calc

Answer 2

Unfortunately you can't subtract 40px from 33%. SASS generates a standard CSS file to be interpreted by the browser, and at build time SASS doesn't know the dimensions of the browser.

However, you should be able to achieve the desired effect by using CSS margins, eg

ul.videos {   li {      width: (100% / 3);      div {          margin: 0 20px;      }   } }