ShortPoint Does Not Support SCSS Code

ShortPoint does not support SCSS / SASS codes. Once an SCSS / SASS Code is pasted in the Code Design Element, you will see the notification below:

This article will detail what an SCSS Code is, why it is not supported, and how you can compile an SCSS Code into a supported CSS code.

TABLE OF CONTENTS

• Before we begin
• What is SCSS / SASS ?
• Why does ShortPoint not support SCSS/SASS?
• How to compile SCSS / SASS Code into a supported CSS code?

Before we begin

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

What is SCSS / SASS ?

SCSS (Sassy CSS) and SASS (Syntactically Awesome Style Sheets) are extensions of CSS that introduce additional features and improvements like variables, nesting, mixins, and functions to the traditional CSS syntax.

Why does ShortPoint not support SCSS/SASS?

SCSS and SASS are CSS preprocessor languages. They must first be compiled into regular CSS before they can be interpreted by web browsers. 

In other words, SCSS and SASS codes must first be compiled into CSS codes before the ShortPoint Code Design Element can interpret them.

How to compile SCSS / SASS Code into a supported CSS code?

To compile an SCSS / SASS code, go to https://www.sassmeister.com/ and paste the SCSS / SASS code into the SCSS field:

Upon pasting, you will immediately see the compiled code in the CSS field:

NOTE: You can also use https://beautifytools.com/scss-compiler.php and https://codebeautify.org/scss-compiler to compile your SCSS / SASS codes.

Then, copy the compiled code and paste it into the CSS field of the Code Design Element:

After pasting the code, scroll down until you see Sandbox Mode, disable it, and click Proceed:

Finally, click the green checkmark:

That’s it! You have successfully compiled an SCSS / SASS code into a CSS code.

Related articles:

• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Customize ShortPoint look and feel using the CSS class name and Custom CSS