Situation
I'm working on a fraction based grid sysem with calc() and flexbox.
I'm struggling to get sass to do calculations with fractions (e.g. "1/8").
Is this actually possible with sass?
Mixin
@mixin column($fraction: '1/1', $gutter: 20px) {
width: calc(100% * #{$fraction} - (#{$gutter} - #{$gutter} * #{$fraction}));
&:not(:nth-child(#{convert-fraction-to-full($fraction)}n) {
margin-right: $gutter;
}
}
Function
@function convert-fraction-to-full($fraction){
@return #{$fraction} / #{$fraction} / #{$fraction};
}
Usage - Include
.griditem {
@include column('1/8', 20px);
}
Usage - desired Output
.griditem {
width: calc(100% * 1/8 - (20px - 20px * 1/8));
}
.griditem:not(:nth-child(8)) {
margin-right: 20px;
}
Problem
The width calculations work, because calc() is taking care of that. But the calculations inside the :nth-child()
doesn't because sass cant handle fractions? Not sure, what's happening here?
Code
Here's a pen to play around with: http://codepen.io/anon/pen/NxOyXq?editors=1100