Cant compile stock scss

[jaska120]

I have untouched Paper Kit 2 PRO v. 2.2.1.

When I try to compile from scss at /assets/scss/paper-kit.scss I get error:
Error: Top-level selectors may not contain the parent selector "&". &::-moz-placeholder {@content; } // Firefox scss/paper-kit/mixins/_inputs.scss 15:3 placeholder() scss/paper-kit/_inputs.scss 1:1 @import scss/paper-kit.scss 40:9 root stylesheet

[jaska120]

Can you look into this?

[groovemen]

Hello @jaska120, thank you for using our products, please send us a link to your product to check for an issue, because I checked in the user's archive and everything looks good. Best, Stefan

[kmuharam]

Having the same issue in 2.2.2

[jdd-canada]

The problem: a parent selector on a root node is nonsensical, and should be recognized as incorrect by the compiler. The current placeholder mixin here does exactly this. Simply removing the parent selector, results in css generated with a space in the rule. Which will not have the desired intent.

Sass is program written in Ruby. Libsass is a C++ port of the Sass engine. The two should be functionally identical when they are implemented.

Here is the crux of the issue - libsass would (erroneously) compile a rule with a parent selector on a root node.

Reference: sass/libsass#930

So anyone who is compiling scss with Ruby sass, or a later version of Libsass after they fixed it, is going to see this error.

The bundled gulpfile.js requires gulp-sass, which is a wrapper for node-sass, which is a wrapper for libsass

So, really there is only two resolutions:

Compile with a version of Libsass from before they fixed it. (I have not confirmed or tested different versions - I do not know which ones compile, which do not. They may have reverted the change, which was around 3.5)

Correct the scss file.

I am reasonably sure this is correct, it generates ok for me now with Ruby sass

@mixin optional-at-root($sel) {
@at-root #{if(not &, $sel, selector-append(&, $sel))} {@content;}
}

@mixin placeholder() {
@include optional-at-root('::-moz-placeholder') {@content;} // Firefox
@include optional-at-root(':-ms-input-placeholder') {@content;} // Internet Explorer 10+
@include optional-at-root('::-webkit-input-placeholder') {@content;} // Safari and Chrome
}

[knsakib]

experiencing the same issue

[jdd-canada]

experiencing the same issue

My comment contains a fix