node-sass error: expected a variable name (e.g. $x) or ')' for the parameter list for url

[bostondevin]

I'm getting this error when using this:

expected a variable name (e.g. $x) or ')' for the parameter list for url

This appears to be a bug in node-sass: sass/node-sass#873

If you update your package.json to the latest version I suspect it will fix it.

[xzyfer]

Please provide a copy-pastable sample of code showing your issue. Without this we cannot help.

[LouGriffith]

I am also seeing this error. I have attached some sample code for reference.

@mixin image-sizes(
  $prefix: "img",
  $sizes: (
    small: (
      height: 23%,
      width: 265px
    ),
    medium: (
      height: 46%,
      width: 550px
    ),
    large: (
      height: 100%,
      width: none
    )
  );
  ) 
{
  @each $size, $dimensions in $sizes {
    @if $prefix {
      $class: #{$prefix}-#{$size};
    } @else {
      $class: $size;
    }
    &.#{$class} {
     width: nth($dimensions, 1);
     max-width: nth($dimensions, 2);
    }
  }

}

Output of libsass 3.4.1

expected a variable name (e.g. $x) or ')' for the parameter list for image-sizes

[xzyfer]

@LouGriffith please provide a fully working copy-pastable code snippet. How are you calling this mixin?

[xzyfer]

The linked node-sass patch has been released. I assume this is fixed but cannot confirm because a reproduction was not supplied.

[VaninaDzhuteva]

Hello,
I am getting this error too:
events.js:154
throw er; // Unhandled 'error' event
^
Error: ..\Projects\SkyApp\scss\layouts_nav.scss
Error: expected a variable name (e.g. $x) or ')' for the parameter list for add-border
on line 6 of ../Projects/SkyApp/scss/layouts/_nav.scss

 @include add-border(1px; #e7e7e7, 'right-left');

--------------------^

at options.error (C:\xampp\htdocs\Gulp\node_modules\node-sass\lib\index.js:272:32)

I am actually watching a tutorial from youtube: https://www.youtube.com/playlist?list=PLillGF-RfqbbpWowfjk9_Vv8XUuTBFPut

I have a several folder with .scss files that are imported into the main.scss
In the _mixins.scss I have the following code:

@mixin add-border ($size, $color, $position) {
@if $position == 'all' {
border: $size solid $color;
}
@else if $position == 'top' {
border-top: $size solid $color;
}
@else if $position == 'bottom' {
border-bottom: $size solid $color;
}
@else if $position == 'right' {
border-right: $size solid $color;
}
@else if $position == 'left' {
border-left: $size solid $color;
}
@else if $position == 'top-bottom' {
border-top: $size solid $color;
border-bottom: $size solid $color;
}
@else if $position == 'right-left' {
border-right: $size solid $color;
border-left: $size solid $color;
}
}

After that I am including it in the _nav.scss (They are in two separate folders):

.navbar{
width: 90%;
margin: auto;
@include add-border(1px; #e7e7e7, 'right-left');
}

This is in the main.scss:

/* base style */

@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_base.scss';
@import 'base/_normalize.scss';

/* layots style */

@import 'layouts/_nav.scss';
@import 'layouts/_header.scss';
@import 'layouts/_footer.scss';

/* modules style */

@import 'modules/_blocks.scss';
@import 'modules/_buttons.scss';
@import 'modules/_components.scss';
@import 'modules/_sections.scss';
@import 'modules/_typography.scss';

I tried moving the imports of the "layout style" before the "base style" and it still doesn`t work.
What could be the reason for that?

Thank you in advance! :)