CODEWITHSUNDEEP
sassstylesheetnode-sass
Alexander Zeitler
Alexander Zeitler

Reputation: 13109

@mixin Invalid CSS after "@mixin

What's wrong with this sass mixin?

@mixin tablet {
  @media (min-width: #{$tablet}) and (max-width: #{desktop - 1px})
    {
      @content;
    }
}

node-sass tells me this error:

@mixin tablet {
              ^
      Invalid CSS after "@mixin tablet {": expected "}", was "{"
      in /home/alexzeitler/src/my-prj/mobile-mockups/src/styles/responsive-mixins.sass (line 4, column 16)

But every sample I look at, uses my syntax shown above.

Update: ./node_modules/.bin/node-sass --version returns

node-sass   4.9.3   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

Upvotes: 1

Views: 767

Answers (1)

Alexander Zeitler
Alexander Zeitler

Reputation: 13109

Solution: I messed up file extensions. Using .scss instead of .sass fixed it.

Also using this SASS syntax will fix it if you want to stick with .sass extension:

=tablet
  @media (min-width: #{$tablet}) and (max-width: #{desktop - 1px})
      @content

=desktop
  @media (min-width: #{$desktop-width})
  @content

Upvotes: 2

Related Questions