Skip to main content
Squeditor relies heavily on Tailwind CSS for utility grids, spacing, and typography, but recognizes that complex components often require a dedicated preprocessor layer. The framework employs a strict 10-layer SCSS hierarchy.

​
The 10-Layer Hierarchy

The entry point for SCSS is always src/assets/scss/main.scss. The file imports the layers in a very specific top-to-bottom cascade:
main.scss
@import 'config';
@import 'functions';
@import 'tokens';
@import 'uikit_dynamic';
@import 'uikit-overrides';
@import 'utilities';
@import 'base';
@import 'components';
@import 'themes/showcase';    // auto-replaced based on squeditor.config.js
@import 'custom';           // Your client or project custom styles or overrides
LayerDescription
_config.scss, _functions.scssThe foundational programmatic layers. _config.scss is the Design Dashboard, housing Sass variables and maps for colors, typography, spacing, radius, and shadows.
_tokens.scssThe Generation Layer. It takes properties from _config.scss and emits them as global CSS custom properties. You rarely need to edit this file.
_base.scssDocument-level resets extending standard normalizing behavior.
ex: HTML/Body typography baseline, generic a tag hover transitions.
_uikit_dynamic.scssDynamic variables specifically bridging Squeditor tokens into the UIKit3 SCSS ecosystem before the main components compile.
_uikit-overrides.scssOverriding default UIKit3 styles. Because UIKit generates massive specificity, we dedicate a specific layer entirely to resolving .uk-modal-dialog or .uk-offcanvas-bar overrides using our custom properties.
_components.scssCustom Squeditor component styles which Tailwind struggles to bundle cleanly.
ex: .sq-card, .sq-hero-overlay, .sq-accordion-active.
_utilities.scssCSS-only helper classes not natively covered by Tailwind.
ex: Typography gradients, complex clip-paths, or .scrollbar-hide. Note that background classes requiring variants (like hover:sq-bg-primary) are registered as plugins directly inside tailwind.config.js instead of here.
themes/*.scssthemes/default provides the fallback tokens, while specific child themes (showcase, saas, agency) are swapped dynamically by build-components.js per build target.
_custom.scssThe absolute highest specificity layer, loading last. Use this for specific client overrides and final project-specific CSS patches that must forcefully cascade over themes and components.
themes/showcase.scss
// Overriding Layer 2 Tokens
:root {
  --sq-color-primary: #FF0000;
  --sq-font-sans: 'Helvetica Neue', sans-serif;
}