CODEWITHSUNDEEP
sass
zedge
zedge

Reputation: 81

How to multiply percentage with an arithmetic expression

I'm programming a 12 column based grid on SASS. I used a @for for iterating over values to assign them to "col-". Depending on the number, is the width. The problem is when i multiply the gutter (3%) by an arithmetic expression which is (12-iterator) this message appears:

Error: Undefined operation: "3% times 12 - 1".

I already tried to assign 12-iterator a value, and also to indent the - symbol, as i know sass sometimes confuses it with a negative number.

$columns: 12;
$grid-gutter: 3%;
@for $j from 1 to $columns {
    .col-#{$j}{
      width: (100% / (12/#{$j})) - ($grid-gutter*(12 - #{$j}) / 12 );
        }
 }

I expected to be, for j=1:

width:(100% / 12) - ($grid-gutter * 11 / 12);

Upvotes: 0

Views: 144

Answers (1)

Arkellys
Arkellys

Reputation: 7800

When using variables interpolation in a calculation, you also need to use calc() or it will return an error. In your case, you also forgot to interpolate $grid-gutter.

width: calc((100% / (12 / #{$j})) - (#{$grid-gutter}  * (12 - #{$j}) / 12 ));

That's said, you actually don't need calc() or the interpolation in this situation, you can just use the variables as it:

width: (100% / (12 / $j)) - ($grid-gutter * (12 - $j) / 12);

This will compile as:

.col-1 { width: 5.5833333333%; }
.col-2 { width: 14.1666666667%; }
.col-3 { width: 22.75%; }
...

Upvotes: 1

Related Questions