Skip to content
SpiraCSS v0.3.2-beta

Components

The component layer is the most detailed layer in SpiraCSS’s three-layer architecture. It organizes structural design with Block/Element, separation of appearance and state with Variant/State, SCSS section structure, and file management under a single set of rules.

File structure

One Block per SCSS file is the default.

article-card/
├── article-card.webc      # template
├── article-card.scss      # root Block
└── scss/                  # stores child Blocks
    ├── card-header.scss
    ├── card-body.scss
    └── index.scss         # aggregates child Blocks with @use
  • Template: follow your framework’s naming convention
  • SCSS: a file with the same name as the Block
  • scss/: place child Blocks flat, and aggregate them in index.scss
  • Top-level: use the root Block as the entry point

Scoping child Blocks

When you call @include meta.load-css("scss") in the root Block, child Blocks are expanded and nested under the parent selector, so styles do not leak outside.

@use "sass:meta";


.article-card {
  @include meta.load-css("scss"); // expand child Blocks
}

When you need shared code

Decide where to place it based on scope:

  • Within the same parent Block → —shared section
  • Same page, multiple components → page-specific shared component under components/pages/
  • Multiple pages → extract under components/parts/ or components/common/

Detailed guides