CODEWITHSUNDEEP
cssnestedless
lampropoi
lampropoi

Reputation: 131

LESS resusable nested classes

Lets say that I have the following:

.class-1 {
  font-weight: bold;
  p{
   color: red;
  }
}

And I want to define in LESS a class-2 that has the same styling with the p element in the class-1. Is there any way to do so other than writing the code?

Upvotes: 0

Views: 384

Answers (2)

Priscilla Huff
Priscilla Huff

Reputation: 11

.class-1, .class-2 { 
    font-weight: bold; 
    p{ 
        color: red; 
    } 
}

Upvotes: 0

Nick
Nick

Reputation: 3281

if I understand you correctly, you want to style your p if it's the child of class-1 or class-2. but class-1 and class-2 should have different styling.

I'd recommend writing it out twice or a different approach, but you can use mixins if you don't want to write it out twice.

LESS

.p() {
  color:red;
}

.class-1 {
  font-weight: bold;
  p{
   .p;
  }
}
.class-2{
  p{
    .p;
  }
}

CSS output

.class-1 {
  font-weight: bold;
}
.class-1 p {
  color: red;
}
.class-2 p {
  color: red;
}

Upvotes: 1

Related Questions