Sass calc() doesn't work properly in this kit

I have the following sass code for a grid column: Working fine in Codepen: https://codepen.io/anon/pen/zpwpOm?editors=1100

// 1rem = 10px
$grid-width: 114rem
$gutter-horizontal: 6rem
.row
  max-width: $grid-width
  .col-1-of-2
    width: calc((100% - #{$gutter-horizontal}) / 2)

<div className="row">
  <div className="col-1-of-2">Col 1 of 2</div>
  <div className="col-1-of-2">Col 1 of 2</div>
</div>

Since the grid width is 1140px (max size triggered) and $gutter-horizonta is 60px, each column width should be 540px so I would have 540px + 60px + 540px = 1140px. However for some reason the column width that appears when I inspect the element in any browser is 47% which is no sense since 47% is 535.8px not 540px.

Why is the following code being converted to no sense percentages? width: calc((100% - #{$gutter-horizontal}) / 2)

It should be converted to 540px not 47%

Of course I end with a unexpected spacement aftet the second column:

For some reason the width in the compiled css is 47% while in any other place I test this code, like in a separate node-sass project or in Codepen it works perfectly.

node-sass: 4.7.2 sass-loader: 6.0.6

Node version: 6.2.2 (also tried 8.9) npm version: 3.9.5 Operating system: macOS High Sierra Command line used: npm start

[jhnns]

You’re applying the less-loader and the sass-loader on the same file. This change has been introduced recently with https://github.com/coryhouse/react-slingshot/pull/512. Maybe this problem is based on a misunderstanding of the includePaths option. It will be passed as option to the respective loader. It does not constrain the folders where the loader will be executed. You need to create two separate loader chains with two separate extract-text-plugin instances as shown in the readme.

Also note that the Less doesn’t have an includePaths option. The option is called paths.

---

@leonimurilo

The only differences I found is the he’s using scss instead of sass and I tried to put all the course stuff in a React project.

The react-slingshot setup is totally different than your instructor’s setup. There is a lot of going on with your CSS. If you’re just learning this stuff, I would recommend to start with a bare repository and stick to the instructions 😃

[nickytonline]

@leonimurilo,

If everything builds and the SASS is compiled to CSS, I don’t see how there is a problem with React Slingshot and I find it highly unlikely that there is an issue with node-sass or sass-loader.

Do you have a public repo to compare your SASS with that of the Code Pen to further investigate the issue? Thanks.