Skip to content

url Compile #2598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
YYQH opened this issue May 26, 2015 · 6 comments
Closed

url Compile #2598

YYQH opened this issue May 26, 2015 · 6 comments

Comments

@YYQH
Copy link

YYQH commented May 26, 2015

.IE6Background(@url: none) when (isstring(@url)){
    background-image: url('@{url}');
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@{url}",enabled=true,sizingMethod="crop");
}
.banner-des-bg4ie6{
    .IE6Background('../img/ui.png');
}

after Compile, I find the same url param ,but output two result

.banner .banner-img .banner-descript .banner-des-bg4ie6 {
  background-image: url('../lib/img/ui.png');
  _background-image: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/ui.png", enabled=true, sizingMethod="crop");
  margin: 0 -168px;
}
@seven-phases-max
Copy link
Member

See --relative-urls.
So (assuming you're compiling with --relative-urls on) this is expected behaviour.
I.e. depending on you needs (providing you can't use url() for Microsoft.AlphaImageLoader), you either need to turn the option off or alternatively escape url identifier so Less won't process it, e.g.:

background-image: ~'url(@{url})';

Also please use backticks to format your code.

@YYQH
Copy link
Author

YYQH commented May 26, 2015

In a function,the param usually is the same. so, I hope you could normalize parameter,also you could give up a function that can deal url when compile the file。thanks

@seven-phases-max
Copy link
Member

so, I hope you could normalize parameter

The parameter is the same. The difference is in url('@{url}') and src="@{url}" statements: the first one is url but the second one is just a string hence the result (yet again see --relative-urls).

@YYQH
Copy link
Author

YYQH commented May 26, 2015

thanks!
by the way,Less is very useful tools for writing CSS,but,one style part need one function, but when i need use one function do more things, I need write more function ,like the function overloading, for example:
.animation(@name, @duration: 500ms, @fn: ease, @delay:0, @count: 1, @direction: normal) when (iskeyword(@name)){
// ...
}
.animate(@name, @duration) when (@name = maskradi){
.animation(@name, @duration, ease-in-out);
// ...
}
.animate(@name, @duration, @width) when (@name = maskwipe){
.animation(@name, @duration, ease-in-out);
// ...
}
.animate(@name, @duration: 400ms, @top: 100px) when(@name = vertialjump){
.animation(@name, @duration);
// ...
}
so ,in future , Less could support more useful conditional statements in function, like 'if else'

@YYQH YYQH changed the title url Compile Bug url Compile May 26, 2015
@seven-phases-max
Copy link
Member

Please use backticks to format your code. (I formatted you first post as an example but I won't be doing this for further posts).

As for you question, sorry, the issue tracker is not a forum. So for a generic Less "How-To" question please use SO. And for another issues/feature-requests search/create a dedicated ticket.

Either way, regarding the else functionality: first of all you can put conditional mixins into the main animation mixin. Beside there're plenty of features that cover all the multi-conditional use-cases just fine (logical expressions, pattern-matching, CSS guards, default() function etc. etc. etc. See corresponding examples in the docs)... Additionally see these SO Q&A queries: 1, 2 etc. for more practical guards usage examples.

@seven-phases-max
Copy link
Member

Closing as expected behaviour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants