export_scss
Export color palettes as SCSS variables, maps, and mixins with utility functions for consistent styling in web projects.
Instructions
Generate SCSS variables, maps, and mixins for color palettes with utility functions
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Implementation Reference
- src/tools/export-scss.ts:55-154 (handler)Core handler function that validates input parameters, parses colors, generates SCSS code including variables/maps/mixins, creates additional formats, and returns structured response.
async function exportScss( params: ExportScssParams ): Promise<ToolResponse | ErrorResponse> { const startTime = Date.now(); try { // Validate parameters const { error, value: validatedParams } = exportScssSchema.validate(params); if (error) { return createErrorResponse( 'export_scss', 'INVALID_PARAMETERS', `Invalid parameters: ${error.details.map(d => d.message).join(', ')}`, Date.now() - startTime ); } // Parse colors const colors: UnifiedColor[] = []; for (const colorStr of validatedParams.colors) { try { const color = new UnifiedColor(colorStr); colors.push(color); } catch { return createErrorResponse( 'export_scss', 'INVALID_COLOR', `Invalid color format: ${colorStr}`, Date.now() - startTime, { details: { provided: colorStr }, suggestions: [ 'Use hex format like #FF0000', 'Use RGB format like rgb(255, 0, 0)', 'Use HSL format like hsl(0, 100%, 50%)', ], } ); } } // Generate SCSS const scss = generateSCSS(colors, validatedParams); // Generate additional export formats const exportFormats = { scss, css: convertScssToCSS(scss), json: { colors: colors.map((color, index) => ({ index: index + 1, hex: color.hex, rgb: color.rgb, hsl: color.hsl, semantic_name: validatedParams.semantic_names?.[index], variable_name: getVariableName(index, validatedParams), })), format: validatedParams.format, prefix: validatedParams.prefix, namespace: validatedParams.namespace, metadata: { total_colors: colors.length, includes_functions: validatedParams.include_functions, includes_variants: validatedParams.include_variants, }, }, }; const executionTime = Date.now() - startTime; return createSuccessResponse( 'export_scss', { scss_output: scss, format: validatedParams.format, color_count: colors.length, prefix: validatedParams.prefix, namespace: validatedParams.namespace, includes_functions: validatedParams.include_functions, includes_variants: validatedParams.include_variants, }, executionTime, { recommendations: [ 'Use SCSS maps for better organization of large color palettes', 'Consider using mixins for consistent color application', 'Use functions for dynamic color manipulation', ], exportFormats, } ); } catch (error) { return createErrorResponse( 'export_scss', 'PROCESSING_ERROR', error instanceof Error ? error.message : 'Unknown error occurred', Date.now() - startTime ); } } - src/tools/export-scss.ts:10-43 (schema)Joi schema defining input parameters for the export_scss tool including colors array, format options, prefixes, flags, and optional semantic names/namespace.
const exportScssSchema = Joi.object({ colors: Joi.array() .items(Joi.string()) .min(1) .max(100) .required() .description('Array of colors to export'), format: Joi.string() .valid('variables', 'map', 'mixins', 'all') .default('all') .description('SCSS format type'), prefix: Joi.string() .pattern(/^[a-zA-Z][a-zA-Z0-9-_]*$/) .default('color') .description('Prefix for SCSS variable names'), include_functions: Joi.boolean() .default(true) .description('Include utility functions and mixins'), include_variants: Joi.boolean() .default(true) .description('Include lighter/darker variants'), semantic_names: Joi.array() .items(Joi.string()) .description('Optional semantic names for colors'), namespace: Joi.string() .pattern(/^[a-zA-Z][a-zA-Z0-9-_]*$/) .description('Optional namespace for variables'), }); - src/tools/export-scss.ts:337-343 (registration)ToolHandler object exporting the tool with name, description, schema-derived parameters, and wrapper around the main exportScss handler.
export const exportScssTool: ToolHandler = { name: 'export_scss', description: 'Generate SCSS variables, maps, and mixins for color palettes with utility functions', parameters: exportScssSchema.describe(), handler: async (params: unknown) => exportScss(params as ExportScssParams), }; - src/tools/index.ts:140-143 (registration)Central registration of the export_scss tool (and related export tools) into the ToolRegistry singleton.
toolRegistry.registerTool(exportCssTool); toolRegistry.registerTool(exportScssTool); toolRegistry.registerTool(exportTailwindTool); toolRegistry.registerTool(exportJsonTool); - src/tools/export-scss.ts:159-296 (helper)Helper function that generates the actual SCSS code: variables, color maps, utility functions, and mixins based on format, prefixes, variants, etc.
function generateSCSS( colors: UnifiedColor[], params: ExportScssParams ): string { const { format, prefix, include_functions, include_variants, semantic_names, namespace, } = params; let scss = ''; const ns = namespace ? `${namespace}-` : ''; // Header comment scss += `// Generated SCSS Color Palette\n`; scss += `// Format: ${format}\n`; scss += `// Colors: ${colors.length}\n\n`; // Generate SCSS variables if (format === 'variables' || format === 'all') { scss += `// Color Variables\n`; colors.forEach((color, index) => { const name = semantic_names?.[index] || `${prefix}-${index + 1}`; const safeName = name.toLowerCase().replace(/[^a-z0-9-]/g, '-'); scss += `$${ns}${safeName}: ${color.hex};\n`; if (include_variants) { const lighterColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.min(100, color.hsl.l + 15)}%)` ); const darkerColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.max(0, color.hsl.l - 15)}%)` ); scss += `$${ns}${safeName}-light: ${lighterColor.hex};\n`; scss += `$${ns}${safeName}-dark: ${darkerColor.hex};\n`; } }); scss += '\n'; } // Generate SCSS color map if (format === 'map' || format === 'all') { scss += `// Color Map\n`; scss += `$${ns}colors: (\n`; colors.forEach((color, index) => { const name = semantic_names?.[index] || `${prefix}-${index + 1}`; const safeName = name.toLowerCase().replace(/[^a-z0-9-]/g, '-'); scss += ` '${safeName}': ${color.hex},\n`; if (include_variants) { const lighterColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.min(100, color.hsl.l + 15)}%)` ); const darkerColor = new UnifiedColor( `hsl(${color.hsl.h}, ${color.hsl.s}%, ${Math.max(0, color.hsl.l - 15)}%)` ); scss += ` '${safeName}-light': ${lighterColor.hex},\n`; scss += ` '${safeName}-dark': ${darkerColor.hex},\n`; } }); scss += `);\n\n`; } // Generate utility functions and mixins if ((format === 'mixins' || format === 'all') && include_functions) { scss += `// Utility Functions\n`; // Color getter function scss += `@function ${ns}color($name) {\n`; scss += ` @if map-has-key($${ns}colors, $name) {\n`; scss += ` @return map-get($${ns}colors, $name);\n`; scss += ` }\n`; scss += ` @warn "Color '#{$name}' not found in $${ns}colors map";\n`; scss += ` @return null;\n`; scss += `}\n\n`; // Background color mixin scss += `// Background Color Mixin\n`; scss += `@mixin ${ns}bg-color($name, $opacity: 1) {\n`; scss += ` $color: ${ns}color($name);\n`; scss += ` @if $color {\n`; scss += ` @if $opacity == 1 {\n`; scss += ` background-color: $color;\n`; scss += ` } @else {\n`; scss += ` background-color: rgba($color, $opacity);\n`; scss += ` }\n`; scss += ` }\n`; scss += `}\n\n`; // Text color mixin scss += `// Text Color Mixin\n`; scss += `@mixin ${ns}text-color($name, $opacity: 1) {\n`; scss += ` $color: ${ns}color($name);\n`; scss += ` @if $color {\n`; scss += ` @if $opacity == 1 {\n`; scss += ` color: $color;\n`; scss += ` } @else {\n`; scss += ` color: rgba($color, $opacity);\n`; scss += ` }\n`; scss += ` }\n`; scss += `}\n\n`; // Border color mixin scss += `// Border Color Mixin\n`; scss += `@mixin ${ns}border-color($name, $width: 1px, $style: solid) {\n`; scss += ` $color: ${ns}color($name);\n`; scss += ` @if $color {\n`; scss += ` border: $width $style $color;\n`; scss += ` }\n`; scss += `}\n\n`; // Theme mixin scss += `// Theme Mixin\n`; scss += `@mixin ${ns}theme($background, $text, $accent: null) {\n`; scss += ` @include ${ns}bg-color($background);\n`; scss += ` @include ${ns}text-color($text);\n`; scss += ` \n`; scss += ` @if $accent {\n`; scss += ` a, .accent {\n`; scss += ` @include ${ns}text-color($accent);\n`; scss += ` }\n`; scss += ` }\n`; scss += `}\n\n`; } return scss; }