Sass Error: Invalid CSS after "...0, 0, -5deg); }": expected 1 selector or at-rule, was "{"

Question

Sass error throwed when compile this:

@keyframes flipInX

    from
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
        animation-timing-function: ease-in
        opacity: 0

    40%
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
        animation-timing-function: ease-in

    60%
        opacity: 1
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg)

    80%
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)

    to
        transform: perspective(400px)

The error points to this line:

    ...
80%

transform: perspective(400px) rotate3d(1, 0, 0, -5deg)

to
    ...

This error was throwed in past in different places and disappeared after switching lines or retyping tabs and/or new line typing. This seems like a bug and this is very annoying. How i can fix this?

P.S. I am working in Sublime Text 3 if it can help...

Daniel Sixl · Answer 1 · 2018-12-14T16:51:40.077

1

Looks to me like it is your indentation. Sass has a indented syntax – indentation is equal to using {}.

In your example the indentation is missing, so the code cannot be compiled correctly.

Copying your code into a CodePen and giving it indentation is fixing the error for me:

@keyframes flipInX
  from
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
      animation-timing-function: ease-in
      opacity: 0
  40%
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
      animation-timing-function: ease-in      
  60%
      opacity: 1
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg)
  80%
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  to
      transform: perspective(400px)

An indentation is made of two spaces, no tabs.

edited Dec 14 '18 at 16:51

answered Dec 14 '18 at 16:39

Daniel Sixl

2,488
2
16
29

Yes, copying to codepen and giving it indentation fixed problem. Codepen uses 2 spaces per tab. I retype tabs in my editor for 4-spaces per tab indent and it works, but the problem still exists... Maybe the editor causes problems with identation. How to fix it - is the question – Alex Shul Dec 14 '18 at 16:56
In the Sass Guidelines (https://sass-guidelin.es/) it says that Sass needs an indentation of two spaces. https://codepen.io/Sixl/pen/vvGLvx?editors=1101 Can you explain your remark 'I retype tabs in my editor for 4-spaces per tab'? – Daniel Sixl Dec 14 '18 at 17:13
There are also answers on how to change indentation (2 spaces to 4 spaces) for Sass on SO: https://stackoverflow.com/questions/13689264/change-indentation-in-sass – Daniel Sixl Dec 14 '18 at 17:26
@DanielSixl in Sublime you can tell it to use tabs or spaces when you indent. You can also tell it how many spaces are in an indent. I believe this is what the OP is talking about. – hungerstar Dec 14 '18 at 17:28
'I retype tabs in my editor for 4-spaces per tab' means - i replace 2-space tabs with 4-space tabs. Thanks for links. And i see also - when i open sass file with wordpad, i see 3-space tabs and missing tabs and idk why sublime shows this different then it is in file... I try Visual Code Editor and Notpad++ and they show file like Sublime... – Alex Shul Dec 14 '18 at 17:44

score 0 · Answer 2 · answered Dec 14 '18 at 18:17

0

The solution for this problem i find here: How do I force Sublime Text to indent two spaces per tab?

The problem was in incorrect indentation in my editor (Thanks to Daniel Sixl). Changing preferences in Sublime Text solves the problem (i hope it will never appear again). The preferences is:

"tab_size": 2,
"translate_tabs_to_spaces": true,
"detect_indentation": false,

answered Dec 14 '18 at 18:17

Alex Shul

500
7
22

1

Sidenote: There is a shortcut in Sublime Text, if needed indentation changes often: Just click on the bottom right info message about current indentation of document. A context menu will appear with all choices. – Daniel Sixl Dec 14 '18 at 18:23

Sass Error: Invalid CSS after "...0, 0, -5deg); }": expected 1 selector or at-rule, was "{"

2 Answers2