> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SCSS

> Understanding layer boundaries and the 10-layer SCSS pipeline.

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:

```scss main.scss theme={null}
@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.<br />*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.<br />*ex:* `.sq-card`, `.sq-hero-overlay`, `.sq-accordion-active`.                                                                                                                                                  |
| `_utilities.scss`                 | CSS-only helper classes not natively covered by Tailwind.<br />*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.                                                                                                  |

```scss themes/showcase.scss theme={null}
// Overriding Layer 2 Tokens
:root {
  --sq-color-primary: #FF0000;
  --sq-font-sans: 'Helvetica Neue', sans-serif;
}
```