Less css: variables definition

Question

I have to projects, basing on the same HTML and different CSS. I want to bring together the CSS definitions of those two projects in one Less file, with variables to define the differences.

Project 1:

.userbar {
    background: #fff;
}

Project 2:

.userbar {
    background:url(../images/bg-userbar.png) no-repeat 100% 100%;
}

The merged Less Code should be:

userbar {background: @bg_userbar}

Then I can define the color for project 1 like this:

@bg_userbar: #fff;

But for project 2, is this valid less code?

@bg_userbar: background:url(../images/bg-userbar.png) no-repeat 100% 100%;

Many thanks for your help! Sascha.

Wasn't aware of Less. Seems interesting. Like the sort of Variables, so-to-speak, that you can accomplish with Less. — user752723
– user752723, Commented Jan 5, 2013 at 18:18

Allen Bargi · Accepted Answer · 2013-01-05 18:15:02Z

4

the first variable definition is of course valid, for the second one you just need to escape it:

@bg_userbar: #fff;
@bg_userbar: ~"url(../images/bg-userbar.png) no-repeat 100% 100%";

.userbar {background: @bg_userbar}

answered Jan 5, 2013 at 18:15

Allen Bargi

15.2k9 gold badges61 silver badges58 bronze badges

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

Comments

Windwalker · Accepted Answer · 2013-01-26 14:48:48Z

1

I just spent some time again with this issue.

@bg_userbar: url(../images/bg-userbar.png) no-repeat 100% 100%;
.userbar {
    background:@bg_userbar;
}

is valid less code and compiles to

.userbar {
  background: url(../images/bg-userbar.png) no-repeat 100% 100%;
}

But thanks for the hint with escaping; although it's not necessary.

answered Jan 26, 2013 at 14:48

Windwalker

1,9457 gold badges24 silver badges44 bronze badges

Collectives™ on Stack Overflow

Less css: variables definition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related