Libsass: sass syntax `:root` is error?

Created on 24 Nov 2017 · 15Comments · Source: sass/libsass

:root is error?

input.sass

:root
  font-size: 16px

Actual results

=> changed: /Users/oti/test/style.sass
{
  "status": 1,
  "file": "/Users/oti/test/style.sass",
  "line": 1,
  "column": 1,
  "message": "Invalid CSS after \"r\": expected 1 selector or at-rule, was \"root: {\"",
  "formatted": "Error: Invalid CSS after \"r\": expected 1 selector or at-rule, was \"root: {\"\n        on line 1 of style.sass\n>> root: {\n   ^\n"
}

It seems to me that the colon is not interpreted correctly.

But use www.sassmeister.com, does not error.🤔

Expected result

:root {
  font-size: 16px; }

version info:

$ node-sass --version
node-sass       4.7.1   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2   (Sass Compiler) [C/C++]

ping https://github.com/sass/node-sass/issues/2156

Source

oti

Most helpful comment

use (backslash):root 😄

Larsklopstra on 6 Dec 2017

👍48 ❤19 🎉18 🚀6 👀2 👎2

All 15 comments

Weird, same problem I face when trying to add :root...

ADTC on 27 Nov 2017

use (backslash):root 😄

Larsklopstra on 6 Dec 2017

👍48 ❤19 🎉18 🚀6 👀2 👎2

Thanks @Larsklopstra couldn't figure this one out!

wouter-muller on 13 Dec 2017

Closing as resolved, although error message could be better. Ruby sass gives:

Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
       If ":root" should be a selector, use "\:root" instead.

mgreter on 11 Jan 2018

👍8 🚀2

Abstraction leak. Should be fixed to allow ":root" without backslash.

nickshanks on 26 Mar 2019

👍7

allready the same problem while compiling from sass to css (Live Sass Compiler
ritwickdey.live-sass)

chooomedia on 2 May 2019

Just mentioning :root in the error message would already help a lot, seeing how it's often used in tandem with CSS variables.

mmKALLL on 4 May 2019

Just mentioning :root in the error message would already help a lot, seeing how it's often used in tandem with CSS variables.

you have to rename the *.sass to *.sCss file!

chooomedia on 4 May 2019

Well, it did not work even with backslash prefixed

\:root {
    font-size: 62.5%;
    body {
        margin: 0;
        // Body font size 16px
        font-size: 1.6rem;
    }
}

[13:24:45] Starting 'build:scss-dev'...
Error in plugin 'sass'
Message:
    src/scss/main.scss
Error: Invalid CSS after "\\:root": expected 1 selector or at-rule, was "{"
        on line 1 of src/scss/main.scss
>> \:root {

   ------^

But then I found comment from googol7:

also happens if you forget to add a semicolon ; after an @import "xyz";

Deele on 8 Jul 2019

@Deele to be clear, this issue is about the "indented" Sass syntax.

wouter-muller on 8 Jul 2019

That is documented? https://sass-lang.com/documentation/style-rules/declarations#custom-properties

jefer94 on 3 Oct 2019

It is still not working even after escaping the selector in the bootstrap version I have in the node_modules (which I know I shouldn't be doing)

Any solution guys ?

hamza-eljh on 7 Oct 2019

Is there any reason why unescaped :root works in SCSS but not in SASS syntax?

This used to work by the way. libsass 3.4.0 compiles

:root
  foo: 1

:root {
  --foo: 1; }

Starting from libsass 3.5.0 this errors Invalid CSS after "r": expected 1 selector or at-rule, was "root: {".

The trouble is that libass >= 3.5 needs escaped pseudo element \:root but libsass < 3.5 doesn't understand that syntax. So my SASS file using a root pseudo element breaks either way, depending on which version of libsass is used in the runtime environment.

It seems the only way to work around this for now is to switch to SCSS syntax (at least for the :root selector).