css Question posted in
Some basic documentation can be found here.

Why does Post CSS Variables replace my variables in my CSS to the actual values?

After submitting my CSS code to Post CSS Variables Playground it changes my variables to the actual value defined in the stylesheet. Is there a specific reason this occurs?

I’m still in the early stages of learning web development so please excuse me if it is something simple that I do not understand yet. I am currently learning HTML if that matters.

I expected the variables to remain in the sylesheet

Tags:

2

Answers


  1. 0

    When you submit your CSS code with variables to the PostCSS Variables Playground, it likely uses a plugin designed to transform CSS variables into static values. This transformation happens because:

    Compatibility: Older browsers do not support CSS variables. By replacing variables with their actual values, the resulting CSS becomes compatible with these browsers.
    Performance: In some cases, removing the variables can slightly improve performance since the browser doesn’t need to calculate the value of variables during rendering.

    Login or Signup to reply.
  2. 0

    That’s literally the purpose of the plugin. And that playground is a playground of the plugin, not that of PostCSS. Below’s the first line of the plugin’s NPM page:

    PostCSS CSS Variables

    PostCSS plugin to transform CSS Custom Properties (CSS variables)
    syntax into a static representation.

    You could think of the PostCSS ecosystem as a variety of tools that allow us to apply additional transformation to our CSS code after they’re written. The benefit of doing so is that we gain new functionalities not available in vanilla CSS. For example, the plugin postcss-mixins allows us to write "templates" in CSS which can be reused in multiple places throughout the stylesheet. These templates are not valid CSS themselves, but the plugin will take care to transform them into valid ones for us before we run our site.

    In the case of CSS variables, sometimes people only use them to simplify development process: if you have multiple properties that share the same value, it’s easier to write them as using the same CSS variable so that when you need to update their values, tweaking one variable updates them all at once. But since the values of all these properties are known before hand, it is reasonable to transform them into their actual values before shipping the code to production.

    May I ask why would you try out your code there if this transformation of variables into static values — the plugin’s only purpose — is not what you’re looking for?

    If you’re just trying to test out vanilla CSS variables, try https://jsfiddle.net/.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search