How to convert CSS into LESS when there are multiple classes using same properties

Question

Here is my CSS. How can i convert this code into LESS format.

.A .B h4, .A .B h4 a, .A .C h4, .A .C h4 a, .D h4, .D h4 a 
{
    color: #345e8a !important;
    display: inline-block;
    font-family: @font-family-sans-serif;
    font-size: 17px !important;
}

This is pretty simple and straight-forward mate. What have you tried? Please show us your attempt. — Harry
– Harry, Commented Jan 20, 2015 at 12:34
Also just in case we need to mention that it's already in Less format (no need to bulbulate selectors via nesting unless really necessary). — seven-phases-max
– seven-phases-max, Commented Jan 20, 2015 at 12:49

Mathew Thompson · Accepted Answer · 2015-01-20 12:48:46Z

2

LESS is just a CSS preprocessor, it's your selector that could do with the improvement, we can combine that with LESS namespacing to have something like:

.A, .D
{
    h4, a
    {
        color: #345e8a !important;
        display: inline-block;
        font-family: @font-family-sans-serif;
        font-size: 17px !important;
    }
}

In the above I've simply stripped out your .A .C and .A .B selectors. If you need those, then you'll probably end up with an equally messy solution, but slightly more readable:

.A .B, .A .C, .D
{
    h4, a
    {
        color: #345e8a !important;
        display: inline-block;
        font-family: @font-family-sans-serif;
         font-size: 17px !important;
    }
}

edited Jan 20, 2015 at 12:48

answered Jan 20, 2015 at 12:37

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

seven-phases-max Over a year ago

it's a bit incorrect, to produce the same CSS as in OP's example the nesting code would be something like this.

Mathew Thompson Over a year ago

@seven-phases-max Yeah you're right, I assumed that the OP got his desired selector wrong, I took that .D h4, .D h4 a should have been .A .D h4, .A .D h4 a. I've changed it to remove the assumption so it better reflects the actual question :)

Collectives™ on Stack Overflow

How to convert CSS into LESS when there are multiple classes using same properties

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related