0

I'm trying to replace a series of strings in my Atom's status bar using styles.less. I've figured out that there's rudimentary conditional logic using 'when' but I've only seen examples passing variables, none with existing html properties.

What I'm trying to do, is recognise the contents of a div tag that can take on either of these states:

<div class="status-bar-vim-mode-plus-insert">I</div>
<div class="status-bar-vim-mode-plus-insert">IR</div>

What I'd like to be possible is something along these lines:

.status-bar-vim-mode-plus-insert when (content: "I")
{
    &:after
    {
        content: "NSERT";
    }
}

.status-bar-vim-mode-plus-insert when (content: "IR")
{
    &:after
    {
        content: "EPLACE";
    }
}

I've been searching for 2 or 3 hours now, but so far I've come up short of finding an answer to whether or not this is even possible.

Chris
  • 65
  • 5
  • 1
    Possible duplicate of [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) – rlemon Apr 07 '18 at 17:32
  • 1
    I came across that thread already, but CSS-wise it only considers traditional CSS, not LESS. And given that since, LESS has introduced 'when', I was hoping it was now possible by applying it to content instead of just variables. – Chris Apr 07 '18 at 17:59
  • 1
    No, Less is compiled to CSS and has no idea of what HTML you'll *later* apply the resulting *CSS* to. There're probably tens of Q like this but they all use different wording to express the intention so it's not so easy to find duplicates. Realize that "CSS preprocessors" only simplify the CSS workflow - they *do not add any new features* beyond CSS (it's simply impossible). – seven-phases-max Apr 08 '18 at 04:41

0 Answers0