LESS CSS - &:focus not working in variable selector

Question

LESS CSS - &:focus not working in variable selector

1.7k views Asked by Adifyr At 19 September 2024 at 16:35

I have the following code in my .less stylesheet.

@text-inputs: input[type=text], input[type=password], input[type=email], input[type=number];
@shade: rgba(0, 0, 0, 0.1);

.highlight {
    background: @shade;
}

.input-highlight {
    @{text-inputs} {
        .highlight;
    }
}

.input-highlight-subtle {
    @{text-inputs} {
        &:focus {
            .highlight;
        }
    }
}

My HTML:

<body class="input-highlight-subtle">
    <input type="text" placeholder="Type Here" />
    <input type="password" placeholder="Type Here"/>    
</body>

The result of the above CSS: The background of the input is the @shade color even when I'm not hovering on the input. I checked in my browser developer tools and apparently it generates the code like this:

.highlight {
  background: rgba(0, 0, 0, 0.1);
}
.input-highlight-subtle input[type=text], input[type=password],  input[type=email], input[type=number]:focus {
  background: rgba(0, 0, 0, 0.1);
}

So how do I solve this?

EDIT:

Basically I'd like to have an output like this:

.input-highlight-subtle input[type="text"]:focus, .input-highlight-subtle input[type="password"]:focus, .input-highlight-subtle  input[type="email"]:focus, .input-highlight-subtle input[type="number"]:focus {
    .highlight;
}

How can I achieve that ^ with LESS code? (Pun Intended)

Original Q&A

There are 1 answers

**Yandy_Viera** · Accepted Answer · 2015-06-08 01:25:39

You can try with:

.text-inputs() {
    input[type=text], input[type=password],input[type=email], input[type=number]{        
        .text-inputs-properties();
    }
}

@shade: rgba(0, 0, 0, 0.1);

.highlight {
    background: @shade;
}

.input-highlight {
    .text-inputs();
    .text-inputs-properties() {       
        .highlight;
    }  
}

.input-highlight-subtle {
    .text-inputs();
    .text-inputs-properties() {
        &:hover{
            .highlight;
        }
    }      
}

Credits for @seven-phases-max for his answer Focused selector in variable . How to do that stuff in LESS like in SCSS

I have just adapted it to your case, Here you have it working on this FIDDLE example, I hope this helps

EDIT1: I found this @scottgit comment and I thought it should also be considered

" there is a work around to get the functionality of assigning properties to a set of selectors defined in a variable using the capabilities of LESS 1.7. Consider this:"

//I modified the code a litter bit for your case   

@shade: rgba(0, 0, 0, 0.1);

@inputs: {input[type=text], input[type=email], input[type=password], input[type=number] {.getProps()}};
@pseudo: ~':hover';
@props: { background: @shade;};

.input-highlight-subtle{
    .setProps(@selectors; @props; @extension: ~'') {
        @selectors();
        .getProps() {
            &@{extension} { @props(); }
        }
    } 

    .setProps(@inputs; @props; @pseudo);
}

"So I can assign a pseudo class if I want or not, and pass a set of properties as needed. The key is to put the mixin .getProps() call into the block that is defining the selectors for variable @inputs, which is then called as a local mixin inside .setProps() so that the properties get put where we want them. The @extension could be any escaped string to add to each selector as an additional part of the selector string. Above I do :focus as a pseudo class, but I could have done ~' > div + div' as a child and sibling combination, or whatever."

and here the jsfiddle example

TechQA.

LESS CSS - &:focus not working in variable selector

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in LESS

Popular Questions

Popular Tags

Trending Questions