如何用PostCSS将.cuerpodetalle类的height属性存入变量并用于calc()计算

Got it, let's walk through how to make this work with PostCSS, plus cover the general approach for extracting class properties to variables.

Step 1: Build a Custom PostCSS Plugin #

First, we’ll create a small custom plugin to extract the height value from .cuerpodetalle into a CSS variable. PostCSS doesn’t have a built-in way to "read" existing property values out of the box, so we need to hook into its AST (Abstract Syntax Tree) processing to make this happen.

Create a file named postcss-extract-height.js with this code:

module.exports = () => {
  return {
    postcssPlugin: 'postcss-extract-height',
    Declaration(decl) {
      // Target the .cuerpodetalle class's height property
      if (decl.parent.selector === '.cuerpodetalle' && decl.prop === 'height') {
        const root = decl.root();
        // Add the variable to the :root scope so it's globally accessible
        root.prepend({
          type: 'rule',
          selector: ':root',
          nodes: [
            {
              type: 'decl',
              prop: '--cuerpo-height',
              value: decl.value
            }
          ]
        });
      }
    }
  };
};

module.exports.postcss = true;

Step 2: Configure PostCSS #

Update your postcss.config.js to include this custom plugin plus postcss-custom-properties (to handle CSS variable resolution properly):

module.exports = {
  plugins: [
    require('./postcss-extract-height'),
    require('postcss-custom-properties')
  ]
};

Step 3: Use the Variable in Your CSS #

Now you can reference the extracted variable with calc() for your .footerxpand class:

.cuerpodetalle {
  height: 40vh; /* Your dynamic height value—could be auto, a variable, or a fixed value */
}

.footerxpand {
  height: calc(var(--cuerpo-height) * 2);
  /* Example of another property using the variable */
  margin-top: calc(var(--cuerpo-height) * 0.5);
}

When PostCSS processes this, it’ll first inject --cuerpo-height: 40vh into the :root scope, then resolve the calc() values in .footerxpand to 80vh and 20vh respectively.

If you want a reusable way to extract any property from any class into variables, here’s how to build a flexible custom plugin:

Step 1: Create a Flexible Extraction Plugin #

Make a file named postcss-extract-to-variable.js with this code (it lets you define multiple extraction rules at once):

module.exports = (options = {}) => {
  // Set default config (override this in your PostCSS setup)
  const defaultTargets = [
    { selector: '.target-class', prop: 'width', varName: '--target-width' }
  ];
  const config = { targets: [...defaultTargets, ...(options.targets || [])] };

  return {
    postcssPlugin: 'postcss-extract-to-variable',
    Declaration(decl) {
      config.targets.forEach(target => {
        // Match the target selector and property
        if (decl.parent.selector === target.selector && decl.prop === target.prop) {
          const root = decl.root();
          // Avoid duplicate variables in :root
          let varExists = false;
          root.walkRules(':root', rule => {
            rule.walkDecls(target.varName, () => varExists = true);
          });
          if (!varExists) {
            root.prepend({
              type: 'rule',
              selector: ':root',
              nodes: [
                { type: 'decl', prop: target.varName, value: decl.value }
              ]
            });
          }
        }
      });
    }
  };
};

module.exports.postcss = true;

Step 2: Configure Multiple Extraction Rules #

In your postcss.config.js, define which properties you want to extract from which classes:

module.exports = {
  plugins: [
    require('./postcss-extract-to-variable')({
      targets: [
        { selector: '.cuerpodetalle', prop: 'height', varName: '--cuerpo-height' },
        { selector: '.sidebar', prop: 'width', varName: '--sidebar-width' },
        { selector: '.header', prop: 'padding', varName: '--header-padding' }
      ]
    }),
    require('postcss-custom-properties')
  ]
};

Step 3: Use the Variables Anywhere #

Now you can reuse these variables across your stylesheet:

.sidebar {
  width: 280px;
}

.main-content {
  margin-left: calc(var(--sidebar-width) + 30px);
}

.header {
  padding: 1rem;
}

.breadcrumb {
  padding: calc(var(--header-padding) / 2);
}

Quick Notes #

• If your target property uses a CSS variable (e.g., height: var(--dynamic-height)), the plugin will extract that variable reference directly—PostCSS will resolve it later in the processing chain.
• For media query-specific properties, you’d need to adjust the plugin to check for parent media rules and create scoped variables (e.g., --cuerpo-height-mobile for mobile sizes).

内容的提问来源于stack exchange，提问作者Juan Pablo Andaluz