1

Just to get this clear, im talking about "LESS" as described on http://lesscss.org/

i read the documentation and searched a little around but i didn't find a possibilty to call an mixin with some "null" or undefined parameters.

For example this mixin from retina.js's less file: .at2x(@path, @w: auto, @h: auto) has 2 optional parameters.

Now i only want to call it with a defined path and height. How do i do this?

things that don't work:

.at2x(EXAMPLEURL, '', 500px)
.at2x(EXAMPLEURL, null, 500px)
.at2x(EXAMPLEURL, , 500px)
.at2x(EXAMPLEURL,, 500px)
.at2x(EXAMPLEURL, undefined, 500px)

call that works of course:

.at2x(EXAMPLEURL, auto, 500px)
Barbarossa
  • 808
  • 12
  • 24

3 Answers3

4

A Null Value

Is an escaped empty string, like so:

.at2x(EXAMPLEURL, ~'', 500px);

This would output "nothing" for the @w variable except a white space character. This will not necessarily eliminate the property it is used for, but it will make that property of no effect in the css. So you might get this if it is used for setting width: @w:

width:  ;

Which would be ignored in css. Or if it is part of background-size: @w @h, you would get something like this:

background-size:   500px;

Of course, this is not truly NULL in the normal programming sense of the term, but I think it is what you are seeking for.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Thank you Scott. This doesn't really solve my problem though as "width: ;" != "width: auto;" which might even work with width. In my case i added additional parameters to the at2x mixin (background-repeat) and set it's default value to "no-repeat" which is unequel to css default behaviour thus the empty string reference ~'' didn't work as expected. – Barbarossa Nov 29 '13 at 07:32
  • 1
    @fbtb If you really need some "smart" behavior depending on the arguments passed you can use conditional mixins: [Pattern Matching](https://github.com/SomMeri/less4j/wiki/Less-Language-Mixins#pattern-matching) and [Mixin Guards](https://github.com/SomMeri/less4j/wiki/Less-Language-Mixins#guards). See [this q&a](http://stackoverflow.com/questions/20238472) for example. – seven-phases-max Nov 29 '13 at 10:02
  • @fbtb: The title of your question was confusing. It was not clear that you wanted to use the "default" value of the mixin for `@w`, but seemed from your attempts that you actually wanted to pass a form of NULL to negate that default parameter without actually setting it to something else. If you simply wanted to "skip" passing a value for that, then seven-phases-max's answer that you accepted was correct, and was not in fact merely a "workaround," but rather the way to do it in LESS. – ScottS Nov 30 '13 at 23:53
3

You can use "Named Parameters":

.at2x(EXAMPLEURL, @h: 500px);
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
  • Thank you for this workaround! Works quite well! But the actual answer is "There is no such NULL value" ? At least not a typeable one? ;) – Barbarossa Nov 29 '13 at 07:27
-1

I've the same problem with Less and i find a fix for this.

FIX :

@MyEmptyVar: e("");

Problem example :

Before : 

/* Input (Style.less)*/
@IconPrefix: "";
/*
* With my less version this
* @IconPrefix: ; cause a compilation error    
*/
.@{IconPrefix}glass:before {
  content: "\f000";
}

/* Output  (Style.css)*/
.""glass:before {
  content: "\f000";
}

After: 

/* Input  (Style.less)*/
@IconPrefix: e("");

.@{IconPrefix}glass:before {
  content: "\f000";
}

/* Output  (Style.css)*/
.glass:before {
  content: "\f000";
}
XyQrTw
  • 1