CODEWITHSUNDEEP
cssinheritanceless
Denis Stephanov
Denis Stephanov

Reputation: 5231

Less inheritance doesn't work

Hi can you check please following code? I want define some styles for class, and next apply same styles for another class. I've used inheritance for that but styles from parent aren't used:

.parent-item {
  &:not(:last-child) {
    margin-right: 20px;
  }
}

.child-item {
  &:extend(.parent-item);
  //...
}

Upvotes: 0

Views: 57

Answers (1)

Adel Elkhodary
Adel Elkhodary

Reputation: 1647

just add the word all next to the name of the class 

.child-item {
  &:extend(.parent-item all);
  //...
}

for example 

.parent-item {
  color: green;
  background: red;
  &:not(:last-child) {
    margin-right: 20px;
  }

  &:last-child {
    color: red;
  }

  &:hover {
    color: red;
  }
}




.child-item {
  &:extend(.parent-item all);
  //...
}

result will be

.parent-item,
.child-item {
  color: green;
  background: red;
}
.parent-item:not(:last-child),
.child-item:not(:last-child) {
  margin-right: 20px;
}
.parent-item:last-child,
.child-item:last-child {
  color: red;
}
.parent-item:hover,
.child-item:hover {
  color: red;
}

Upvotes: 2

Related Questions