CODEWITHSUNDEEP
less
Kenneth P.
Kenneth P.

Reputation: 1816

How to merge parent and child style properties using LESS

I have this less code, this is working just fine. I just want to save some spaces when the less cli compiles it.

.secondary-content {
    background: #ffcc80;
    color: white !important;

    label, i {
        background: #ffcc80;
        color: white !important;
    }
}

When I run less from the command prompt, the output looks like this.

.secondary-content {
  background: #ffcc80;
  color: white !important;
}
.secondary-content label,
.secondary-content i {
  background: #ffcc80;
  color: white !important;
}

as you can see they are separated on each block. I would like to have them on the same block. How could I easily merge the parent and child style properties? Like this.

.secondary-content,
.secondary-content label,
.secondary-content i {
  background: #ffcc80;
  color: white !important;
}

I'm still learning less, so any help would be much greatly appreciated.

Thanks in advance

Upvotes: 4

Views: 1610

Answers (2)

Bass Jobsen
Bass Jobsen

Reputation: 49054

Of course the solution provide by @Harry works. When you are learning Less you should keep in mind that Less helps you to write your CSS code DRY and more efficient. Less does not help you to solve issues, that you can not solve in common CSS, Less compiles into CSS and does not add any feature to the compiled CSS.

To reduce the size of your CSS for selectors which share some properties you should consider the extend feature of Less: http://lesscss.org/features/#extend-feature-reducing-css-size:

.selector1 {
  color: red;
}

.selector2:extend(.selector1) {}

outputs:

.selector1,
.selector2 {
  color: red;
}

To solve your issue you should reconsider the desired CSS code instead of the Less code. You can not use extend due to the nesting of the label, i, but why should you nest them to set the color and background-color?

The default value for the background-color is transparent so when you set the background-color for the parent you do not have set the background-color for the child elements (when using the same value).

Possible you override the default transparent with an other style rule with a higher specificity, see also http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

An example which gives your nested label the wrong background-color:

label {
background-color:green;
}             
.secondary-content {
background-color:red;
color: white;    
}

The same for the color property which always inherit from its parent, unless applied in an anchor.

You are also using !important, see: https://css-tricks.com/when-using-important-is-the-right-choice/

Upvotes: 3

Harry
Harry

Reputation: 89780

You can make use of the parent selector (&) like in the below snippet. Usage of parent selector would mean that the same rules apply for .ghost .secondary-content selector as well as its child label and i tags.

.ghost .secondary-content {
    &, label, i {
        background: #ffcc80;
        color: white !important;
    }
}

Upvotes: 6

Related Questions