scssphp failing to compile. Fails at loop.

[mattpilott]

Okay so scssphp works fine with regular css code in an scss file but my proper scss code fails to be compiled. Here is my error:

Fatal error: Uncaught exception 'Exception' with message 'parse error: failed at .#{$name}-#{round(100/$columns * $ii)}, glui/css/modules/_grid.scss on line 69' in /home/codelab/public_html/glui/build/scssphp/scss.inc.php:4051 Stack trace: #0 /home/codelab/public_html/glui/build/scssphp/scss.inc.php(2739): scss_parser->throwParseError() #1 /home/codelab/public_html/glui/build/scssphp/scss.inc.php(1654): scss_parser->parse('/* ////////////...') #2 /home/codelab/public_html/glui/build/scssphp/scss.inc.php(608): scssc->importFile('glui/css/module...', Object(stdClass)) #3 /home/codelab/public_html/glui/build/scssphp/scss.inc.php(621): scssc->compileImport(Array, Object(stdClass)) #4 /home/codelab/public_html/glui/build/scssphp/scss.inc.php(639): scssc->compileImport(Array, Object(stdClass)) #5 /home/codelab/public_html/glui/build/scssphp/scss.inc.php(511): scssc->compileChild(Array, Object(stdClass)) #6 /home/codelab/public_html/glui/build/scssphp/scss.inc.php(327): scssc->compileChildren(Array, Object(stdClass)) #7 /home/ in /home/codelab/public_html/glui/build/scssphp/scss.inc.php on line 4051

Here is my script:

/* //////////////// GRID SETTINGS //////////////// */
/* //////////////// GRID SETTINGS //////////////// */

$rowClass: "row";
$colClass: "col";
$edgeClass: "edge";
$columns: 20;
$names: s, m, l, xl;
$sizes: null, "40.06rem", "64.06rem", "75.06rem";
$maxWidth: "75rem";


/* //////////////// GRID STRUCTURE //////////////// */
/* //////////////// GRID STRUCTURE //////////////// */

.#{$rowClass} {
    width: 100%;
    margin: 0 auto;
    max-width: $maxWidth;

    &:before,
    &:after,
    .#{$rowClass}:before,
    .#{$rowClass}:after,
    .#{$rowClass}.#{$edgeClass}:before,
    .#{$rowClass}.#{$edgeClass}:after {
        content: " ";
        display: table;
    }

    &:after,
    .#{$rowClass}:after,
    .#{$rowClass}.#{$edgeClass}:after {
        clear:both;
    }

    &.#{$edgeClass} > .#{$colClass} {
        padding: 0;
    }

    &.#{$edgeClass} .#{$rowClass} {
        margin: 0;
    }

    .#{$rowClass},
    .#{$rowClass}.#{$edgeClass} {
        width: auto;
        margin: 0 -1em;
        max-width: none;

        &.#{$edgeClass} {
            margin:0;
        }
    }
}

.#{$colClass} {
    position: relative;
    padding: 0 1rem;
    float: left;
}

@for $i from 1 through 4 {
    $screen: if($i == 1, "only screen", "only screen and (min-width: #{nth($sizes, $i)})");

    @media #{$screen} {
@for $ii from 1 through $columns {
    $name: nth($names, $i);
    .#{$name}-#{round(100/$columns * $ii)},
    .#{$name}-#{round(100/$columns * $ii)}\% {
        width: round(100%/$columns * $ii);
    }
}
@for $iii from 1 through 2 {
    $name: nth($names, $i);
    .#{$name}-#{floor(100/3 * $iii)},
    .#{$name}-#{floor(100/3 * $iii)}\% {
        width: floor(100%/3 * ($iii*100))/100;
    }
}
@for $iiii from 1 through $columns {
    $name: nth($names, $i);
    .inset-#{round(100/$columns * $iiii)},
    .inset-#{round(100/$columns * $iiii)}\% {
        margin-left: round(100%/$columns * $iiii);
    }
}
    }
}

.#{nth($names, 1)},
.#{nth($names, 2)},
.#{nth($names, 3)},
.#{nth($names, 4)} {
    &-center {
        margin: 0 auto;
        float: none;
    }
    &-uncenter {
        margin: 0;
        float: left;
    }
}

And lastly this part is where it fails:

@for $ii from 1 through $columns {
    $name: nth($names, $i);
    .#{$name}-#{round(100/$columns * $ii)},
    .#{$name}-#{round(100/$columns * $ii)}\% {
        width: round(100%/$columns * $ii);
    }
}
@for $iii from 1 through 2 {
    $name: nth($names, $i);
    .#{$name}-#{floor(100/3 * $iii)},
    .#{$name}-#{floor(100/3 * $iii)}\% {
        width: floor(100%/3 * ($iii*100))/100;
    }
}
@for $iiii from 1 through $columns {
    $name: nth($names, $i);
    .inset-#{round(100/$columns * $iiii)},
    .inset-#{round(100/$columns * $iiii)}\% {
        margin-left: round(100%/$columns * $iiii);
    }
}

[leafo]

I have a feeling it's the \% at the end of the selector, could you try removing that?

[mattpilott]

Leafo, you are correct it is the \% causing the issue. Is this something that you can support in scssphp as it is supported by regular compilers or apps like code kit. If you could it would be much appreciated.

[robocoder]

Note: the fix in 072e9ea doesn't handle the &-center selector in your example -- that was introduced in sass 3.3.x.