Use Sass/SCSS for advanced CSS preprocessing with modern @use/@forward syntax
Provides Sass/SCSS preprocessing guidance with modern @use/@forward syntax, mixins, functions, and variables. Claude uses this when you need advanced CSS preprocessing, modular architecture, or migration from deprecated @import syntax.
/plugin marketplace add pluginagentmarketplace/custom-plugin-css/plugin install css-assistant@pluginagentmarketplace-cssThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/config.yamlassets/schema.jsonreferences/GUIDE.mdreferences/PATTERNS.mdscripts/validate.pyMaster Sass/SCSS preprocessing with modern @use/@forward syntax, mixins, functions, and modular architecture.
This skill provides atomic, focused guidance on Sass/SCSS with current dart-sass syntax and migration patterns from deprecated @import.
| Property | Value |
|---|---|
| Category | Preprocessing |
| Complexity | Intermediate to Advanced |
| Dependencies | css-fundamentals, css-architecture |
| Bonded Agent | 05-css-preprocessors |
Skill("css-sass")
parameters:
feature:
type: string
required: true
enum: [variables, mixins, functions, nesting, modules, extends]
description: Sass feature to explore
syntax:
type: string
required: false
default: scss
enum: [scss, sass]
description: Sass syntax format
modern_syntax:
type: boolean
required: false
default: true
description: Use @use/@forward instead of deprecated @import
validation:
- rule: feature_required
message: "feature parameter is required"
- rule: valid_feature
message: "feature must be one of: variables, mixins, functions, nesting, modules, extends"
retry_config:
max_attempts: 3
backoff_type: exponential
initial_delay_ms: 1000
max_delay_ms: 10000
logging:
entry_point: skill_invoked
exit_point: skill_completed
metrics:
- invocation_count
- feature_usage
- modern_syntax_adoption
// _variables.scss
$primary-color: #3b82f6 !default;
$spacing-unit: 8px !default;
// _mixins.scss
@use 'variables' as vars;
@mixin button-base {
padding: vars.$spacing-unit * 2;
background: vars.$primary-color;
}
// main.scss
@use 'variables' as v;
@use 'mixins' as m;
.button {
@include m.button-base;
color: v.$primary-color;
}
// abstracts/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';
// main.scss
@use 'abstracts';
.element {
color: abstracts.$primary-color;
}
// Responsive breakpoints
@mixin respond-to($breakpoint) {
@if $breakpoint == 'sm' {
@media (min-width: 640px) { @content; }
} @else if $breakpoint == 'md' {
@media (min-width: 768px) { @content; }
} @else if $breakpoint == 'lg' {
@media (min-width: 1024px) { @content; }
}
}
// Flexbox center
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// Typography scale
@mixin text-style($size, $weight: 400) {
font-size: $size;
font-weight: $weight;
line-height: 1.5;
}
// Rem conversion
@function rem($pixels, $base: 16) {
@return #{$pixels / $base}rem;
}
// Color manipulation
@function tint($color, $percentage) {
@return mix(white, $color, $percentage);
}
@function shade($color, $percentage) {
@return mix(black, $color, $percentage);
}
/* OLD (deprecated) */
@import 'variables';
@import 'mixins';
.button {
color: $primary-color;
@include button-base;
}
/* NEW (recommended) */
@use 'variables' as v;
@use 'mixins' as m;
.button {
color: v.$primary-color;
@include m.button-base;
}
scss/
├── abstracts/
│ ├── _index.scss # @forward all
│ ├── _variables.scss
│ ├── _mixins.scss
│ └── _functions.scss
├── base/
│ ├── _index.scss
│ ├── _reset.scss
│ └── _typography.scss
├── components/
│ ├── _index.scss
│ ├── _button.scss
│ └── _card.scss
├── layouts/
│ ├── _index.scss
│ └── _grid.scss
└── main.scss
describe('CSS Sass Skill', () => {
test('validates feature parameter', () => {
expect(() => skill({ feature: 'invalid' }))
.toThrow('feature must be one of: variables, mixins...');
});
test('returns @use syntax when modern_syntax is true', () => {
const result = skill({ feature: 'modules', modern_syntax: true });
expect(result).toContain('@use');
expect(result).not.toContain('@import');
});
test('includes namespace examples for modules', () => {
const result = skill({ feature: 'modules' });
expect(result).toContain('as');
});
});
| Error Code | Cause | Recovery |
|---|---|---|
| INVALID_FEATURE | Unknown feature | Show valid options |
| DEPRECATED_SYNTAX | Using @import | Show @use migration |
| NAMESPACE_CONFLICT | Duplicate namespace | Suggest unique alias |
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.