Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I create a mixin using less.js that doesn't output in the final stylesheet

Tags:

css

frontend

less

I'm creating some mixins in my less.js stylesheets where I don't want the original mixin to appear in the final output.

For example, I have a couple of rules like this:

.grid1 { width: 960px; }

I'm then applying it to the element or elements I want to take those values like so:

.foo {
  .grid1;
}  

But then my final css file has both in.

What facility does Less provide for creating the original mixin without rendering it as a css rule as well?

like image 671
Sam Murray-Sutton Avatar asked Oct 22 '25 22:10

Sam Murray-Sutton


1 Answers

The best answer I can come up with seems to be to declare the mixin as a parametric mixin or as part of a bundle, with or without no parameters.

e.g.

.grid1() { width: 960px; } /* Not rendered in final css */

as opposed to

.grid1 { width: 960px; } /* Will render */

(note lack of parentheses)

Feels a bit of a hack, but I'm not sure why the language should have something special for that purpose if this does the trick.

like image 103
Sam Murray-Sutton Avatar answered Oct 24 '25 13:10

Sam Murray-Sutton



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!