Best Practices for User-Defined Function Calls in Sass

User-defined function calls can impact the user experience in the SMT Theme Skin Manager when developing Sass for your theme. This article outlines best practices to ensure that changes in variables are properly reflected without causing delays during rendering.

Why Are User-Defined Function Calls Problematic?

When you define your Sass variables and include user-defined function calls, it can lead to complications during the compilation process. For instance, consider the following example:

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

In this scenario, $sc-color-secondary is set based on a function myfunc($sc-primary-color). If $sc-primary-color is an editable variable, any change made by an SMT administrator to this variable will be rendered in the frontend quickly. However, because myfunc($sc-primary-color) relies on backend processes, the completion of this function may take longer, leading to a poor user experience.

Recommendations Against Using If Statements and Mixins

Similar issues arise with the use of if statements and mixins involving exposed Sass variables. For example:

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

In this case, the frontend does not have the necessary context to evaluate the else condition. Such logic is only resolved during backend compilation, which can increase wait times significantly. Also, grouping variables as mixins can complicate the process in the same way, prolonging the compilation time.

Best Practices Summary

• Avoid User-Defined Functions: Minimize or eliminate the use of user-defined functions for exposed variables to enhance performance.
• Steer Clear of Conditional Logic: Refrain from using if statements that rely on exposed variables to prevent delays during frontend compilation.
• Limit the Use of Mixins: Use mixins cautiously; their evaluation in the backend can slow down overall rendering times.

By adhering to these practices, you can improve the performance of the SMT Theme Skin Manager and provide a smoother editing experience for users.