Appearance

Main SCSS Entry Point ​

File Information ​

  • Path: app/assets/scss/main.scss
  • Purpose: Main SCSS entry point that imports all partials
  • Type: Main file (outputs compiled CSS)

Overview ​

The main.scss file is the central entry point for all SCSS styles. It follows the 7-1 Pattern architecture and uses modern SCSS syntax (@use instead of deprecated @import).

Architecture Pattern ​

The file follows the 7-1 Pattern:

  1. Abstracts - Variables, Functions, Mixins
  2. Base - Reset, Typography, Utilities
  3. Layout - Header, Footer, Sidebar, etc.
  4. Components - Reusable UI components
  5. Pages - Page-specific styles

Import Structure ​

1. Abstracts ​

scss
@use 'abstracts/variables' as *;
@use 'abstracts/mixins' as *;
@use 'abstracts/functions' as *;

Variables are auto-injected via Vite, but also loaded here for namespace availability.

2. Base ​

scss
@use 'base/reset';
@use 'base/typography';
@use 'base/utilities';

Foundation styles that apply globally.

3. Layout ​

scss
@use 'layout/header';
@use 'layout/announcement';
@use 'layout/layout';
@use 'layout/sidebar';
@use 'layout/breadcrumbs';

Structural layout components.

4. Components ​

scss
@use 'components/buttons';
@use 'components/radio';
@use 'components/checkbox';
@use 'components/switch';
@use 'components/chips';
@use 'components/tooltips';
@use 'components/powered-by';
@use 'components/loading-states';
@use 'components/carousel';
@use 'components/boxview';
@use 'components/cards';
@use 'components/forms';
@use 'components/select';
@use 'components/menu-list';
@use 'components/links';
@use 'components/dialogs';
@use 'components/datepicker';
@use 'components/tables';
@use 'components/image-group';
@use 'components/collage-boxes';
@use 'components/grid-icons';
@use 'components/image-upload';
@use 'components/snackbar';
@use 'components/skeleton';

All reusable UI components.

5. Pages ​

scss
@use 'pages/assets-detail';
@use 'pages/collage-detail';
@use 'pages/settings';
@use 'pages/error';
@use 'pages/login';

Page-specific styles.

Modern SCSS Syntax ​

The file uses modern @use syntax instead of deprecated @import:

  • Better namespace control
  • Prevents duplicate imports
  • More efficient compilation
  • Follows Sass best practices

Variable Auto-Injection ​

Variables are automatically injected via Vite's additionalData configuration, making them available in all SCSS files. They're also explicitly loaded here to ensure namespace availability in main.scss.

Import Order Importance ​

The import order is critical:

  1. Abstracts first - No CSS output, just variables/mixins/functions
  2. Base second - Foundation styles
  3. Layout third - Structural components
  4. Components fourth - Reusable components
  5. Pages last - Highest specificity, page-specific overrides

This order ensures proper CSS cascade and specificity.

Usage ​

This file is imported in the application's main entry point (typically in nuxt.config.ts or main Vue file). It should not be imported directly in components.

Best Practices ​

  1. Maintain import order - Don't change the import order without understanding the cascade
  2. Use @use syntax - Never use deprecated @import
  3. Keep it organized - Add new imports in the appropriate section
  4. Document additions - When adding new partials, ensure they're documented