Invalid format while compiling CSS using node-sass

Question

I am getting an error while making my page responsive. I am using @mixin to make that possible.

@mixin mediaSm{
  @mixin screen and (max-width:768px) {
    @content;

  }
}

@mixin mediaMd{
  @mixin screen and (max-width:500px) {
    @content;

  }
}
@mixin mediaLg{
  @mixin screen (min-width:769px) and (max-width:1170px) {
    @content;

  }
}
@mixin mediaSm{
  @mixin screen and (min-width:500px) {
    @content;

  }
}

I am getting an error which says that the format is wrong and there should be '{'after 'and'. I am using Ubuntu, but the same code does not show a kind of error in Windows 10.

{ "status": 1, "file": "/opt/lampp/htdocs/my_portfolio/scss/_config.scss", "line": 34,
"column": 10, "message": "Invalid CSS after \" @mixin screen\": expected \"{\", was \"and (max-width:768p\"", "formatted": "Error: Invalid CSS after \" @mixin screen\": expected \"{\", was \"and (max-width:768p\"\n on line 34 of scss/_config.scss\n from line 1 of scss/main.scss\n>> @mixin screen and (max-width:768px){\n\n ---------^\n" }