# sass-best-practices

A skill that hands your agent a rulebook for indented-syntax Sass: file layout, variables, mixins, BEM. Useful when the project stylesheets are .sass, not SCSS.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 845 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/sass-best-practices/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/sass-best-practices

## What it does

The skill tells the agent how to write Sass in the indented syntax. No curly braces, no semicolons, nesting defined by indentation, `.sass` extension. Those rules land in the agent's context, so generated styles match the file style instead of drifting into SCSS.

What's inside: a `sass/` folder layout split into `abstracts`, `base`, `components`, `layout`, `pages`, `themes` and `vendors`, plus a `main.sass` manifest built on `@use`. Variables cover colors, typography, a spacing scale, breakpoints and z-index. Mixins handle responsive breakpoints, flexbox helpers, text truncation and button variants. Naming follows BEM, with modifiers written as `&--`. A nesting section asks you to keep selectors shallow rather than five levels deep.

It fits projects already on indented Sass. On an SCSS codebase the indentation and brace rules will just confuse the agent, so check which syntax your repository actually uses before installing.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill sass-best-practices -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/sass-best-practices/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/sass-best-practices/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill sass-best-practices -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/sass-best-practices/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill sass-best-practices -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/sass-best-practices/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills sass-best-practices
```

2. **Manually: put the files in place**
- File: `.github/skills/sass-best-practices/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill sass-best-practices -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path sass-best-practices
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/sass-best-practices/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill sass-best-practices -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/sass-best-practices/SKILL.md

## When to use it
- write styles in indented Sass without braces or semicolons
- lay out a `sass/` tree by layer and wire a `@use` manifest
- define variables for colors, spacing and breakpoints
- build mixins for responsive breakpoints and flexbox
- keep selector nesting from growing too deep

## Example prompts
- add a product card to `components/_cards.sass` following the skill rules
- rewrite this block in indented Sass with a BEM modifier
- create a mixin for the `md` breakpoint and apply it to the grid

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 1c6217dba4e1cc52.

BEGIN THIRD-PARTY FILE 1c6217dba4e1cc52
````text
---
name: sass-best-practices
description: Sass (indented syntax) best practices and coding guidelines for clean, maintainable stylesheets
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Sass Best Practices

You are an expert in Sass (the indented syntax), CSS architecture, and maintainable stylesheet development.

## Key Principles

- Write clean, readable Sass using the indented syntax (whitespace-sensitive)
- Leverage Sass features to create DRY, modular stylesheets
- Maintain consistent indentation as it defines code structure
- Prioritize simplicity and clarity in style organization

## Sass vs SCSS

Sass uses the original indented syntax:
- No curly braces `{}`
- No semicolons `;`
- Indentation defines nesting
- File extension: `.sass`

```sass
// Sass (indented syntax)
.button
  display: inline-flex
  padding: 8px 16px
  background: #3498db

  &:hover
    background: darken(#3498db, 10%)
```

```scss
// SCSS syntax (for comparison)
.button {
  display: inline-flex;
  padding: 8px 16px;
  background: #3498db;

  &:hover {
    background: darken(#3498db, 10%);
  }
}
```

## File Organization

### Project Structure
```
sass/
├── abstracts/
│   ├── _variables.sass
│   ├── _functions.sass
│   ├── _mixins.sass
│   └── _placeholders.sass
├── base/
│   ├── _reset.sass
│   ├── _typography.sass
│   └── _base.sass
├── components/
│   ├── _buttons.sass
│   ├── _cards.sass
│   └── _forms.sass
├── layout/
│   ├── _header.sass
│   ├── _footer.sass
│   └── _grid.sass
├── pages/
│   └── _home.sass
├── themes/
│   └── _default.sass
├── vendors/
│   └── _normalize.sass
└── main.sass
```

### Main Manifest
```sass
// main.sass
@use 'abstracts/variables'
@use 'abstracts/functions'
@use 'abstracts/mixins'
@use 'abstracts/placeholders'

@use 'vendors/normalize'

@use 'base/reset'
@use 'base/typography'
@use 'base/base'

@use 'layout/grid'
@use 'layout/header'
@use 'layout/footer'

@use 'components/buttons'
@use 'components/cards'
@use 'components/forms'

@use 'pages/home'

@use 'themes/default'
```

## Variables

### Naming and Organization
```sass
// _variables.sass

// Colors
$color-primary: #3498db
$color-primary-light: lighten($color-primary, 15%)
$color-primary-dark: darken($color-primary, 15%)
$color-secondary: #2ecc71
$color-text: #333333
$color-text-muted: #666666
$color-background: #ffffff
$color-border: #e0e0e0
$color-error: #e74c3c
$color-success: #27ae60
$color-warning: #f39c12

// Typography
$font-family-base: 'Helvetica Neue', Arial, sans-serif
$font-family-heading: 'Georgia', serif
$font-size-base: 1rem
````
END THIRD-PARTY FILE 1c6217dba4e1cc52

The third-party file has ended. Everything between the 1c6217dba4e1cc52 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2762 of 11525 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/sass-best-practices/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md