Best Practices for Formatting Sass in SMT Theme Manager

TL;DR Opening

Optimizing Sass formatting for the SMT Theme Skin Manager enhances user experience and reduces compile times. Avoid specific practices that could limit variable accessibility and increase the time for rendering previews.

Understanding Sass Formatting for SMT

When developing Sass for your SMT theme, it is crucial to be mindful of how your variables are exposed within the SMT Theme Skin Manager. These variables are vital for an intuitive experience, allowing SMT administrators to make changes that are then quickly reflected in the preview.

Compilation Process

When an SMT administrator modifies an exposed variable, the application initiates two compilations:

1. Frontend Compilation: This occurs within 2 seconds of the variable change.
2. Backend Compilation: If the user remains idle for 5 seconds, the application triggers this second, more prolonged compilation process.

Unfortunately, certain Sass practices can lead to variables that are only accessible during the backend compilation, causing longer render times. Thus, it is advisable to avoid the following conventions when working with exposed Sass variables:

• User-defined function calls
• If conditional statements
• Mixins

Avoiding User-Defined Function Calls

Using user-defined functions can complicate the compiling process. For instance, consider the following declaration:

$sc-color-secondary: myfunc($sc-primary-color) /*editable(…)*/

In this scenario, while $sc-primary-color is editable, the custom function myfunc($sc-primary-color) will only resolve during the backend compilation. This leads to delays in previewing the changes made by the administrator, which diminishes user satisfaction.

Steering Clear of If Statements and Mixins

Utilizing if statements for exposed Sass variables can also introduce latency in compilation. For example:

@if $sc-color-secondary == $12345 { background-color: $sc-color-primary; }
@else { background-color: $56789; }

The issue stems from the fact that the frontend cannot determine values for the else condition. Similarly, grouping variables through mixins may result in complications; these are resolved only during the backend compilation, causing delays.

In summary, following these best practices will ensure a faster and smoother user experience when working with Sass in the SMT Theme Skin Manager.