lessphp icon indicating copy to clipboard operation
lessphp copied to clipboard

Support &:extend

Open bluetidepro opened this issue 10 years ago • 3 comments

NOTE: I saw some other issues similar to this, but wasn't sure on a clear answer on when this is being added or if they were asking for the same thing.

I just updated to lessphp v0.4.0 and it looks like it doesn't support &:extend because I get the error parse error: failed at '&:extend(.foo);'

&:extend was added way back when: https://github.com/less/less.js/blob/master/CHANGELOG.md#140-beta-1--2

Here is some examples of how it works (which is actually different than mixins, sometimes people think they are the same which isn't true)

LESS:

.foo {
  color: red;
}
.bar {
  &:extend(.foo);
}

LESS output:

.foo,
.bar {
  color: red;
}

Notable about LESS extend is that it doesn't extend nested selectors by default. So if we do this:

.module {
  padding: 10px;
  h3 {
    color: red; 
  }
}

.news {
  &:extend(.module);
}

The h3 will not be extended, and will output:

.module,
.news {
  padding: 10px;
}
.module h3 {
  color: red;
}

However, if you add the all keyword, like:

.news {
  &:extend(.module all);
}

It will extend everything:

.module,
.news {
  padding: 10px;
}
.module h3,
.news h3 {
  color: red;
}

(You can also specify a nested selector to extend in place of the all keyword.)

You can find more info here: http://css-tricks.com/the-extend-concept/

bluetidepro avatar Oct 30 '13 14:10 bluetidepro