SCSS Web Resources

SCSS files are represented by SCSS Web Resources.

SCSS is an extension to CSS grammar that adds variables, functions and nested rules. SCSS must be compiled into CSS before it's served to a web browser. When an SCSS Web Resource is requested it is automatically compiled into CSS.

You can learn more about SCSS here.

In the SCSS editor, you can preview the compiled CSS using the Preview CSS button and check for compilation errors using the Verify SCSS button. Compiler errors will be reported in the Compiler Output tab.

The Imports View lists all the files that an SCSS file references using the @import command.

You can attach SCSS Web Resources to a:

Page by selecting the page and editing its Web Resource properties.
Form by opening the Form Properties window and selecting the Web Resources tab.
Theme in its Presentation Template's Web Resources section.

Steps

Create a Form. Add a Panel Control to your Page and give it the CSS class outer.

Add three more Panel Controls to the first panel. Give these the CSS classes of left, middle and right.

Create a new SCSS Web Resource and name it colours.

Add it to your Page.

Edit your SCSS Resource to contain the following classes and variables:

$blue: #7F7FFF;
$red: #FF7F7F;

.outer {
  display: flex;
  
  div {
    width: 100px;
    height: 100px;
  }

  .left {
    background-color: $blue;
  }

  .right {
    background-color: $red;
  }

  .middle {
    background-color: mix($blue, $red);
  }
}

Run your Form. The central panel should have a background colour that is a mixture of the left and the right panel backgrounds.