Sp-dev-docs: Indented SASS syntax (`.sass` vs. `scss`)

[jareha]

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

My team intends to use indented SASS syntax instead of bracketed syntax.

Our expectation was that naming files .sass instead of .scss would allow for this functionality, but we have found that when we do name files .sass, our builds fail.

[StfBauer]

The short answer. You cannot use the SASS (indention based) Syntax in most modern implementations anymore. You are still able to use in the native implementation of the SASS Syntax specification.
When you read in the documentation that it is still supported this refers to the native implementation.
In practice, it is only rarely.

SPFx uses a preprocessing library named libsass. This library is written in C++ and is better optimised for performance.
This library does not support the indent based syntax because of its rare use.

Nowadays SASS is said but SCSS syntax is in nearly all cases meant.

[jareha]

Is it possible, then, to use a different preprocesser with SPFx? Thanks for the quick—and detailed!—response.

[StfBauer]

There is no supported other pre-processor in SPFx available. Sorry.

The SASS/CSS configuration is currently set up to support a special component approach to make all style of a web part unique to the web part. So the web part styles do not bleed to the rest of the page. and stay in context of the component.

May I ask you what your concerns against SASS and the SCSS Syntax are?

[jareha]

It is our team’s code style standard for all other projects (up to this point, all non-SharePoint) within our company to use indented syntax. As we bring devs. from these other projects on to our SharePoint project—we’re ramping up—our intention is to keep these standards in place, as best we can.

[StfBauer]

Understandable so basically It is more a question of workflow than a technological; meaning that you are not forced to develop all your CSS in SPFx.
When you develop the layout for new components outside of SPFx and only move the CSS over you can keep your standard, but the output goes to SPFx.

If you want all your components reusable in your style guide, pattern library or component library you are free to use. In SASS or SCSS you can then define through collection individual parts together what you need for your extension or web part.

If you are able to define your components and Styles you can move the resulting CSS over to SPFx. Not an ideal workflow but this part can maybe even happen automated.

The workflow in SPFx looks like this to convert the CSS/SCSS into the web part:

• Compile SCSS
• Autoprefix (remove or add all vendor prefixes for all SPFx and SharePoint supported browser)
• CSS Module (To make sure all components get scoped to the web part)

Hope this helps.

[aminimalanimal]

Hi @StfBauer. Thanks for your help so far.

SPFx uses a preprocessing library named libsass. This library is written in C++ and is better optimised for performance.
This library does not support the indent based syntax because of its rare use.

It looks like libsass does support the indentation-based syntax, by parsing it with sass2scss first. sass2scss's intro says that it's been included in libsass since version 2. I checked to make sure it's still in the current version here: libsass v3.5.4 and it looks like it is.

[aminimalanimal]

@microsoft/gulp-core-build-sass sets sassMatch to only look for sass files with the src/**/*.scss glob by default. It's readme confirms this, and also notes that it's a configurable option. However, @microsoft/sp-build-web doesn't set it to anything different, and doesn't seem to offer this configuration option to the end user.

I changed this to src/**/*.sass locally, reran the build, and it worked. It looks like the only change needed to support the indented syntax is to add the .sass extension to @microsoft/gulp-core-build-sass.

Edit: This isn't quite all the changes needed. It looks like the hashes that are added to classes to isolate styles to the component get added when using .sass even if .module is not part of the file name.

[StfBauer]

It looks like libsass does support the indentation-based syntax, by parsing it with sass2scss first. sass2scss's intro says that it's been included in libsass since version 2. I checked to make sure it's still in the current version here: libsass v3.5.4 and it looks like it is.

@aminimalanimal Nice finding wasn't aware of that or haven't found it when I was looking it up.
Nice finding in the gulp-core-build-sass too.

The problem when you change the internal gulp task is that you have to do it for every project and won't be able to update to a newer version without modifying this gulp task again.

Probably the fastest way to get this running as a feature request is to open a new issue an file it as a bug and describe your scenario.
Unless this issue will be re-labeled as bug.

[jareha]

As referenced above, I’ve created https://github.com/Microsoft/web-build-tools/pull/852 to address the issue of indented SASS not working as expected. That pull request now awaits review.

[VesaJuvonen]

Closing this one for now as we cannot fix this in our side due the dependency on the web-build-tools.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues