Calculation of . scss for . Sass

Question

I am creating a dynamic grid system using Sass and Gulp-Sass to compile.

I have this code:

$col-margin: 15px
.row
  width: 100%
  max-width: 1170px
  margin: 0 auto
  display: flex
  flex-wrap: wrap
// cols
=col($cols)
  width: calc(((100% * $cols) /12) - ($col-margin * 2))
  margin: $col-margin
  box-sizing: border-box

In other words, the margin is 15px. When compiling through the terminal, using Gulp-Sass I have this error:

    [20:22:31] Starting 'sass'...
[20:22:31] Starting 'watch'...
[20:22:31] Finished 'watch' after 31 ms
Error in plugin 'sass'
Message:
    assets\gs.sass
Error: Incompatible units: 'px' and '%'.
        on line 10 of assets/gs.sass
>>   width: ((100% * $cols) /12) - ($col-margin * 2);
   -----------^

[20:22:31] Finished 'sass' after 95 ms
[20:22:31] Starting 'default'...
[20:22:31] Finished 'default' after 20 μs

Answer 1

So what happens is that Sass just like all preprocessors don’t run calculations with different units of media.. and in case he’s trying to run and compile it..

The solution in this case is to make sure he doesn’t try to solve this part and let Calc() solve it after it’s compiled..

for this you need an "escape" for what you do not want the Saas to get..

Do it like this:

#{calc(((100% * $cols) /12) - ($col-margin * 2))}

Using this #{} notation involving the part you don’t want Sass to target should solve your problem :)

More hints: http://www.sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Answer 2

Problem solved, the correct is:

width: #{calc((#{(100% * $cols)} / 12) - #{($margin-col * 2)})}