question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

This feature request was proposed as a solution to this issue https://github.com/cloudhead/less.js/issues/1155

This is the synopsis

The awesome thing about mixins is that they speed up development, keep my work surface clean, I only have to write them once, and I know what the compiled result will be. However, a disadvantage of mixins is that they aren’t DRY. Especially when you use “utility” mixins a lot, like clearfix. This is where extends could be a much better option. In fact, this is a great, concrete use case for extending mixins. It would basically work like extending nested selectors, accept with mixins. So mixins wouldn’t change at all, they would still work the same way. If you have a mixin and don’t use it, it won’t show in the compiled CSS. If you do use it, it’s properties will still show up in the compiled code in each selector where it was used. And if you extend a mixin, the selector (or selectors) extending the mixin will show up in place of the mixin. So if you do this:

.clearfix() {
    // stuff
}
.navbar {
    &:extend(.clearfix());
}
.banner {
    &:extend(.clearfix());
}

and the compiled result will be:

.navbar,
.banner {
   // clearfix stuff
}

So the mixins properties are still inherited by the selectors that extended it, but the mixin (selector) itself doesn’t show up in the compiled result.

This would make both extends and mixins far more powerful than they are on their own.

Issue Analytics

  • State:open
  • Created 11 years ago
  • Reactions:11
  • Comments:112 (61 by maintainers)

github_iconTop GitHub Comments

5reactions
matthew-deancommented, Mar 7, 2016

Public Service Announcement

At any point in time, you may submit a pull request, or work with a developer to get one in, and it’s very likely this feature be merged in. The Less.js library needs more regular contributions from individuals like the people in this thread. It’s not any one person’s responsibility. It’s entirely dependant on one individual seeing this thread, or needing this feature, and taking the time to make it happen.

If your response is that you’re not a developer, then there are many OTHER ways you can support this project in non-developmental roles, be it providing needed documentation for new features, or design support on the website, running tests, providing feedback on issues, project managing, answering questions on Stack Overflow, writing blog posts, tweeting about Less, contributing to CSS and web communities, and writing Less libraries.

Many of these tasks are being done by individuals who are developers, so the time they could be contributing to development is spent on these other tasks.

If you are a developer, and your response is, “I don’t have the time,” then that’s the exact reason for why this issue has sat open. It’s 100% up to you if a feature is completed, so asking why it hasn’t been completed by “someone” is not useful. You are that someone. It will happen, I guarantee it will happen, if and when you get involved in this project. You can become involved in one of the most popular open source tools on the web. You can make a difference in the lives of… thousands? Hundreds of thousands? Millions? And as a side benefit, you can make sure that your favorite features happen sooner rather than later.

If you want this or any feature to happen, make it happen. We would love to have you. We would love to work with you! Less can keep getting better and better the larger this community grows!

And, listen, I appreciate that sometimes people really have absolutely no time to contribute and yet still would really like a particular feature to happen. That’s fine. I would just say that if you’re in that scenario, that you aim for empathy and gratitude for people donating their time (and sometimes money) to help you, and I’m sure other people in the Less community will do their best to continue to do so, as they are able.

Sincerely, Matthew Dean, Member of Less.js Core Team

2reactions
stevenvachoncommented, Mar 7, 2016

I already support my own projects and I listen to their feature requests. I honestly don’t have time to dig into Less.js core.

Read more comments on GitHub >

github_iconTop Results From Across the Web

When to use — extends vs mixins in SASS
The extends syntax allows you to share styles between two selectors. It's analogous to the way classes are combined in HTML. Using @extend...
Read more >
Sass: @extend
Extends and mixins are both ways of encapsulating and re-using styles in Sass, which naturally raises the question of when to use which...
Read more >
Extend and Mixins
Extend and Mixins. # Extend. You can extend an existing class component as native class inheritance. Imagine you have following super class component:....
Read more >
include vs @extend in SASS
@mixin is used to group css code that has to be reused a no of times. Whereas the @extend is used in SASS...
Read more >
Sass: When To Use @mixin And When To Use @extend
Mixins are ways to reuse styles across your project and their ability to take arguments makes them very powerful and flexible. The @extend...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found