# Enisn My Agents Scss Compiler

> SCSS Compiler

- Skill: `tomevault-io/enisn-my-agents-scss-compiler` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/enisn-my-agents-scss-compiler`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/enisn-my-agents-scss-compiler/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/enisn-my-agents-scss-compiler

---


# SCSS Compiler

Compile `.scss` files into `.css` files safely and consistently.

## When to Use This Skill

- User asks to compile one or more SCSS files
- A Razor/Page/Component style output CSS is missing
- `compilerconfig.json` includes SCSS input/output mappings
- Agent needs watch mode during frontend edits

## Core Rule

Prefer `sass <input.scss> <output.css>` with explicit paths.

For one-off builds:

```bash
sass "<input.scss>" "<output.css>"
```

For live development:

```bash
sass --watch "<input.scss>:<output.css>"
```

If Sass is not installed:

```bash
npm install -g sass
```

## Repo-Aware Workflow

### Step 1: Check for compiler mapping

Look for `compilerconfig.json` in the target project. If present, use its mapping first.

Example mapping:

```json
[
  {
    "outputFile": "Pages/FileManagement/index.css",
    "inputFile": "Pages/FileManagement/index.scss"
  }
]
```

### Step 2: Build from project root of mapping

If mapping exists, resolve paths relative to the `compilerconfig.json` directory and compile with explicit full paths.

### Step 3: Verify result

- Ensure output `.css` exists
- Ensure output timestamp is updated
- If source maps are unwanted, add `--no-source-map`

## Standard Commands

Single file compile:

```bash
sass "C:\path\to\input.scss" "C:\path\to\output.css"
```

Single file compile without source maps:

```bash
sass --no-source-map "C:\path\to\input.scss" "C:\path\to\output.css"
```

Watch mode:

```bash
sass --watch "C:\path\to\input.scss:C:\path\to\output.css"
```

## Known Good Example (This Repository)

Input:

`C:\P\volo\abp\file-management\src\Volo.FileManagement.Web\Pages\FileManagement\index.scss`

Output:

`C:\P\volo\abp\file-management\src\Volo.FileManagement.Web\Pages\FileManagement\index.css`

Compile command:

```bash
sass "C:\P\volo\abp\file-management\src\Volo.FileManagement.Web\Pages\FileManagement\index.scss" "C:\P\volo\abp\file-management\src\Volo.FileManagement.Web\Pages\FileManagement\index.css"
```

## Troubleshooting

- `sass: command not found`
  - Install globally: `npm install -g sass`
  - Or use `npx sass ...`
- Relative path confusion
  - Use absolute paths
  - Or run command in project folder and keep mapping-relative paths
- CSS not updated
  - Confirm correct input file
  - Check for compile errors in terminal output
- Locked file / permission issue
  - Stop watch process or editor plugin locking output file

## Agent Behavior Guidelines

- Do not ask permission for basic compile; run with best default path pair
- Prefer existing mapping from `compilerconfig.json` over guessing
- Keep commands explicit and reproducible
- Report the exact command used and output path

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/enisn) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->