Calculation of .scss for .sass

Navigation
5

I'm 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 the terminal, using gulp-sass I get 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
    
asked by anonymous 20.11.2016 / 23:27

2 answers

0
So what happens is that Sass just like all preprocessors do not run calculations with different media units .. and in case it's trying to run and compile it ..

The solution in this case is to prevent it from attempting to resolve that part and let calc () resolve it after it has been compiled.

For this you need an "escape" for which you do not want the saas to get in the way ..

Do this: 

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

Using this notation of # {} involving the part you do not want Sass to target should solve your problem:)

More infos: link

    
21.11.2016 / 03:23
0

Problem solved, the correct one is: 

width: #{calc((#{(100% * $cols)} / 12) - #{($margin-col * 2)})}
    
21.11.2016 / 05:01
Allow Camera and Microphone access to a WebView by Xamarin Android What can cause file_get_contents to give a "timeout" error?