In HTML I can do:
div.item_$*5
and get:
<div class="item_1">
<div class="item_2">
<div class="item_3">
<div class="item_4">
<div class="item_5">
but in CSS I don't seem to be able to do:
.item_$*5
and get:
.item_1 {}
.item_2 {}
.item_3 {}
.item_4 {}
.item_5 {}
any idea how to do it or is it just a missing feature?
Posted May 10, 2022, 3:50 PM UTC
If you need 5 unique css classes, then they should be uniquely named. How different are each of your 5 classes?
Edit: meant to reply to your other comment. Whoops!
they are uniquely named. that's the point of the "_%" the percent generates an interator. in HTML it works fine but it doesn't in CSS because emmet apparently doesn't do it.
I fear you are also trying to take this in an XvsY direction. I don't want to solve a different problem, I want to solve THIS problem of emmet not having the * operator in css.
(sorry if this comes across as in any way not appreciative btw, i do appreciate you replying)
No need to apologize! I appreciate you clarifying your point. And I'm happy to explain myself. My sole goal is to help you out if I can, otherwise I'll admit I don't have an answer for you.
I think the biggest point that i want to make is:
Your question makes me wonder if you're properly respecting the "Cascading" features of "Cascading StyleSheets". A numerical list if CCS styles implies that perhaps you'll wind up with a lot of code overlap. Emmett supporting this feature in CSS might come with a risk of accidentally encouraging bad css design practices. Perhaps they left out that feature on purpose?
If you want it back, it appears there is a vscode plug in that will allow you to accomplish that.
My original use for it would be to colour each button in a nav bar a different colour. that's why I wanted to have each button have its own css reference.
That makes sense. Your use case might require the css Emmet plugin if you want to streamline that. I don't think Emmet supports it out of the box.
Secondarily: You might consider nth-child styles if you haven't liked into that already. It can make your styling more predictable.
I may not be correct here, but it sounds like if you're using Emmet for CSS, you might be doing it wrong.
I can understand wanting to make 5 DOM elements, and have an automated mechanism for adding unique attribution to each. In having a harder time imaging common scenarios where you need to do that with style definitions.
Emmet does not act the same in CSS for me as it does in html, jsx, etc (and I would not expect it to). CSS Emmet might be the answer here. It looks like that sort of CSS support for Emmet does not exist right out of the box, but maybe you just need to install it?
Okay. it just seems like a useful feature and im not sure why it doesn't exist.