SCSS Overview

This guide introduces the core SCSS architecture used by Terra projects. It covers key concepts and conventions to help you quickly get up and running with SCSS in our codebase. All of the following files and folders live under the src/scss/ directory.

• style.scss //Entry point of the application
• Directoryframework

  • Directory_mixins

    • Directoryfoundation/

      • …
    • _mixins.scss // // Store mixins that bundle common patterns.
  • Directory_vars

    • _vars.scss // Define colors, spacing, fonts, breakpoints, and other design tokens.
  • Directorycomponents/ // Modular SCSS for UI elements like buttons, cards, forms, etc.

    • …
  • Directoryfoundation/ // Set up global CSS resets, typography rules, and the grid system

    • …
  • Directoryutilities/ // Utility classes for Fast prototype.

    • …
• Directoryglobal-components/ // Terra html/scss library with pre defined styles

  • …
• Directorybackend/.

  • _app-backend.scss // Contains styles that apply only within the WordPress admin interface.