Interpolation

[trisys3]

Is it possible in the spec to use variables in string interpolation? If not, is there a way to add it here, and is that appropriate? Otherwise I suppose I could use postcss-simple-vars, but I wanted to be more future-compatible.

For example (directly from the LESS site):

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
   font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

Compiles to:

.banner {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
}

[tohuw]

@trisys3, why not use custom selectors for this case?

[trisys3]

That makes sense. Is it possible to do variable interpolation where the variable is not the whole selector? I can't tell from the plugin documentation.

[tohuw]

(Ignore the comment I deleted, I misread what you typed)

You mean you want a selector for e.g. .banner-top such that you can write:

@custom-selector :--banner .banner

/* N.B.: PSEUDOCODE */
{:--banner}-top

I don't see that anywhere in the underlying spec, and I'd be surprised if it was planned. Why not use multiple class names in the instances like this, or some principle like BEM?

[trisys3]

You're probably right, we could use something like that. We have something in LESS already, but I am going to need to refactor that code anyway. It would still be nice to have something like this, but it looks like CSS is going to stay really minimal in cases like this, which is fair.

You can close this if you want.

[jonathantneal]

Sorry it took so long to close this. 😸