Less if string is not empty conditional logic

Question

I'm using dotless to dynamically change the look of my site from an admin page.

Essentially I use regular expressions to read the variables defined in the less and then give the user the option to change the value of the variables.

I'm wanting to have the option to set a background image. Essentially I need a way to check if the string is empty if its not then add the background image mixin.

@BackgroundImage: '';

.showBackground(@fileName) when (@fileName != '') {
    background-image: url('../Themes/images/backgrounds/@{fileName}');
}

body {
    .showBackground(@BackgroundImage)
}

So the default is no background '' when the user sets a background the variable @BackgroundImage will be set to 'backgroundImage1.jpg'

How can I get this empty string logic to work?

P.S I've tried setting the variable to #000000 and using isstring() but it would appear to return true.

thgaskell · Accepted Answer · 2013-04-09 00:16:44Z

8

You want to use the when not instead of negating the condition.

LESS

.showBackground(@fileName) when not (@fileName = '') {
    background-image: url('../Themes/images/backgrounds/@{fileName}');
}

Output

@BackgroundImage: ''; // No output.
@BackgroundImage: 'foo'; // background-image: url('../Themes/images/backgrounds/foo');

answered Apr 9, 2013 at 0:16

thgaskell

13.3k5 gold badges34 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

John Over a year ago

this doesn't seem to compile, at least not with dotless trying to debug if i remove the = '' it will compile. Maybe string comparison is not supported... Any ideas?

thgaskell Over a year ago

Hmm, maybe try: when not (isstring(escape(@fileName)))?

thgaskell Over a year ago

Sorry, I mean: when not (isstring(@fileName))? The escape would validate '' as true. But then you'd have to define @BackgroundImage: foo (without the quotes).

John Over a year ago

I have this working now... it makes no sense why what you have recommended doesn't and my this does. @BackgroundImage: -1; .showBackground(@fileName) when (@fileName > 0) i tryed using = instead of > and that didn't work. even using 0 instead of -1 doesn't work. Its a bit of a hack... must be some bugs in dotless. Thanks for your help i got there in the end

thgaskell Over a year ago

np, glad you found your answer. great hack :P

Richard Bailey · Accepted Answer · 2014-09-02 18:14:53Z

Here's another possible solution that sets defaults and checks for use cases when the variable is not used. The problem it attempts to solve is using text as an indicator in some cases and a background image in others.

This worked out well enough even if there is some duplication. Your mileage may vary.

    .pointer( @ico ) when not ( @ico ) {
        &:extend(.global-sprite-image);
        .sprite-position(@ico);
        .sprite-height(@ico);
        .sprite-width(@ico);
        content: '';
        margin-left: 2px;
        line-height: 1;
    }

    .pointer( @ico:'›') when ( default() ) {
        content: @ico;
        font-size: 130%;
        font-weight: bold;
        font-family: @font-title;
        padding-left: 2px;
        line-height: 1;
    }

Collectives™ on Stack Overflow

Less if string is not empty conditional logic

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related