Sass Handling in GenGen

GenGen automatically compiles .scss and .sass files using the Dart Sass compiler.

Directory Structure

your-site/
├── _sass/
│   ├── _mixins.scss         # Reusable mixins
│   └── _variables.scss      # Variables
├── css/
│   └── main.scss            # Main stylesheet
└── _themes/
    └── your-theme/
        └── _sass/           # Theme Sass files

Import Paths

GenGen automatically configures import paths:

1. Site _sass/ directory
2. Theme _sass/ directory

Usage

_sass/_mixins.scss:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

css/main.scss:

@use "mixins" as *;

.button {
  @include border-radius(4px);
}

Configuration

sass_dir: "_sass"

Compilation

• Input: css/main.scss
• Output: public/css/main.css

Files in _sass/ are not compiled directly but are available for import.