SASS "Top Level selectors May not Contain the Parent Selector &"

[James]

Sir, I have just (March 15th 2020) upgraded to Angular 9 and all the latest version of Syncfusion Essential Angular JS (^17.4.51),  node-sass (^4.13.1), typescript

However, I am getting the compile error "SassError: Top-level selectors may not contain the parent selector "&"."  across multiple of your components, including Buttons, Calendar and others. I have made no other changes to the code, and it all worked prior to updating. 

On examination of your scss code it would appear that indeed you are in violation of the Sass standard, as in many of your scss files you do use the parent selector in the top level selectors.

Others have noted this in your forums and I have read carefully through them

1. https://www.syncfusion.com/forums/143711/scss-issue-in-essential-js-2

2. https://www.syncfusion.com/feedback/7839/sscs-import-not-working

3. https://www.syncfusion.com/feedback/4476/compilation-issues-throws-from-scss-file-while-using-sass-compiler

None of the suggested fixes in the above fix the issue.

I also note that in #2 above a fix, at least in the 'theme studio output' in release 3 2019

Question:

1. When will Syncfusion release a fix for this non compliance?
2. How do I work around this until a fix is created?

[Jesus Arockia Sankaran S]

Hi James, 

  

Sorry the delay in getting back to you and for the inconvenience.  

  

Query: However, I am getting the compile error "SassError: Top-level selectors may not contain the parent selector "&"."  across multiple of your components, including Buttons, Calendar and others.  

  

We have checked the reported compilation issue in our end with the specified configuration but we are not able to reproduce the reported issue while compiling with “node-sass”. We suspect that your project is not using “node-sass” for the SCSS compilation and we ask you to install the package after deleting the “node_modules” and package-lock.json” We have attached the sample and configuration information for your reference.  

  

Sample: https://www.syncfusion.com/downloads/support/forum/152447/ze/sasscomp-822396875 

 

We followed the information from the below documentation.  

https://ej2.syncfusion.com/angular/documentation/common/how-to/sass/ 

  

Query: When will Syncfusion release a fix for this non compliance? 

  

We have already logged a feature report for updating Syncfusion SCSS to be compatible with latest sass package. This feature will be implemented in our upcoming Essential Studio Volume 2, 2020 main release. We will update you once this feature is implemented.  

  

You can track the current status of this feature implementation through this Feedback link: https://www.syncfusion.com/feedback/11510/support-both-sass-and-node-sass  

  

Query: How do I work around this until a fix is created? 

  

We request you to use the “node-sass” package for SCSS compilation until we implement the support for both the “sass” and “node-sass” compiler.  

  

Please get back to us with your “package.json” file and your changes in SCSS variable if any in case you still get the same error.  

  

Regards, 

Jesus Arockia Sankaran S 

  

Reference Image: 

[Jakub]

Hello, James and Jesus from Syncfusion support,

I guess you are using the SCSS file generated by Syncfusion Theme Studio (not the file from node_modules).

It's hard to say If is it a bug or not. But it can be fixed by wrapping @content to something, for example - body selector in  @mixin export-module. Like on this image in the uploaded zip file. It should work for every theme provided by Syncfusion.

The error message says, that "&" can not be used as a first/root selector because this char will be replaced by the parent sector while compilation. It's throw exception because, on lots o places in SCSS file, no parent was provided. How & works are described for example here https://css-tricks.com/the-sass-ampersand/.

For Syncfusion support, this can cause a problem to many other programmers, maybe the ampersand at selector the begging in modules is not necessary.

Regards,

Jakub

Attachment: how_to_modify_scss_931b9e6c.zip

[Jesus Arockia Sankaran S]

Hi Jakub, 

Thank you for the information.  

We have went through the provided details and we grateful for your suggestion to resolve the SCSS compilation issue. We will consider your suggestion while fixing this compilation issue.  

Regards, 

Jesus Arockia Sankaran S 

[Maxim]

Hi!

I get this error too. Can you help me, how can I use this mixin?

@mixin export-module($module) {

  @if(index($imported-modules, $module) == null) {

    $imported-modules: append($imported-modules, $module) !global;

    body{

      @content;

    }

  }

}

Thanks.

[Jesus Arockia Sankaran S]

Hi Maxim, 

Sorry for the delay in getting back to you and for the inconvenience. 

We are working on this feature and we expect that it will be completed with our upcoming Volume 3, 2020 release scheduled at the end of September. We can track the progress using the below feedback portal link. 

Link: https://www.syncfusion.com/feedback/11510/support-both-sass-and-node-sass 

If you have any suggestions/specifications regarding the feature request please add it as a comment in the portal. 

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi All, 

 

We are glad to announce that our Essential Studio 2020 Volume 3 release v18.3.0.35  is rolled out and is available for download under the following link. 

 

https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download 

  

We have included the "Support both SASS and NodeSASS" with thi release. We thank you for your support and appreciate your patience in waiting for this release.  

  

Please get in touch with us if you would require any further assistance. 

 

Regards,            

Jesus Arockia Sankaran S