SCSS

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

Layer	Description
`_config.scss`, `_functions.scss`	The foundational programmatic layers. _config.scss is the Design Dashboard, housing Sass variables and maps for colors, typography, spacing, radius, and shadows.
`_tokens.scss`	The Generation Layer. It takes properties from `_config.scss` and emits them as global CSS custom properties. You rarely need to edit this file.
`_base.scss`	Document-level resets extending standard normalizing behavior. ex: HTML/Body typography baseline, generic `a` tag hover transitions.
`_uikit_dynamic.scss`	Dynamic variables specifically bridging Squeditor tokens into the UIKit3 SCSS ecosystem before the main components compile.
`_uikit-overrides.scss`	Overriding 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.scss`	Custom Squeditor component styles which Tailwind struggles to bundle cleanly. ex: `.sq-card`, `.sq-hero-overlay`, `.sq-accordion-active`.
`_utilities.scss`	CSS-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/*.scss`	`themes/default` provides the fallback tokens, while specific child themes (`showcase`, `saas`, `agency`) are swapped dynamically by `build-components.js` per build target.
`_custom.scss`	The 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;
}

Getting started

Architecture & Templating

Styling & Theming

GSAP Animations

Other

The 10-Layer Hierarchy

​The 10-Layer Hierarchy

The 10-Layer Hierarchy