Sass如何根据类名条件导出不同变量以实现与JS共享？

Great question! As a Sass beginner, it’s totally reasonable to wonder how to bridge runtime DOM state (like class names) with preprocessed Sass variables. Let’s break down why your initial approach won’t work, then cover two solid alternatives.

Why Your Proposed Syntax Won’t Work #

First, let’s clear this up: your @if + :export example isn’t feasible. Here’s why:

• Sass is a preprocessor—it compiles your .scss files to plain CSS before the code ever hits the browser.
• The :export directive runs during this compile step, which means it has no access to runtime DOM information (like whether a class exists on an element).
• Class names are only known once the browser renders the page, so Sass can’t use them as conditions for exporting variables.

Feasible Solutions #

1. Export All Variable Sets, Switch in JS #

This approach involves defining all your variable groups in Sass, exporting them all to JS, then using JS to check the class name and pick the right set at runtime.

Sass Code:

// Define separate variable collections for each "theme"
$theme-a: (
  primary-color: #ff4444,
  base-font-size: 16px,
  border-radius: 4px
);

$theme-b: (
  primary-color: #00C851,
  base-font-size: 18px,
  border-radius: 8px
);

// Export all themes to JS
:export {
  themeA: $theme-a;
  themeB: $theme-b;
}

JS Code:

// Import the exported Sass variables
import themes from './path/to/your/styles.scss';

// Check the DOM for the target class name
const hasThemeA = document.body.classList.contains('className-a');
const activeTheme = hasThemeA ? themes.themeA : themes.themeB;

// Use the variables in your JS
console.log(activeTheme.primaryColor); // Note: Sass kebab-case becomes camelCase in JS
document.documentElement.style.fontSize = activeTheme.baseFontSize;

2. Use CSS Custom Properties (Variables) #

This is often the cleaner approach for runtime-dependent styles, since CSS variables are evaluated by the browser at render time. You can still use Sass to define your base values, then map them to custom properties based on class names—JS can then read the active values directly from the DOM.

Sass Code:

// Base Sass variables
$color-a: #ff4444;
$color-b: #00C851;
$font-size-a: 16px;
$font-size-b: 18px;

// Map variables to CSS custom properties per class
.className-a {
  --primary-color: #{$color-a};
  --base-font-size: #{$font-size-a};
}

.className-b {
  --primary-color: #{$color-b};
  --base-font-size: #{$font-size-b};
}

// Optional: Export base variables to JS if you need them statically
:export {
  colorA: $color-a;
  colorB: $color-b;
}

JS Code:

// Get the currently active custom property value
const getActiveVariable = (variableName) => {
  return getComputedStyle(document.body).getPropertyValue(variableName).trim();
};

// Use the active values
const primaryColor = getActiveVariable('--primary-color');
const fontSize = getActiveVariable('--base-font-size');

console.log(primaryColor);
document.querySelector('.some-element').style.color = primaryColor;

Which Approach Is Better? #

• Use exported variable sets if you need to work with the variables in JS before rendering (e.g., calculating values, passing them to frameworks like React/Vue).
• Use CSS custom properties for simpler runtime style syncing—this keeps your styles and JS loosely coupled, and you don’t have to maintain a separate variable map in JS.

内容的提问来源于stack exchange，提问作者Mr.tang