1

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

Arrowcatch
  • 1,612
  • 3
  • 19
  • 26

0 Answers0