CODEWITHSUNDEEP
cssless
Windwalker
Windwalker

Reputation: 1945

Less css: variables definition

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.

Upvotes: 0

Views: 430

Answers (2)

Windwalker
Windwalker

Reputation: 1945

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.

Upvotes: 1

Allen Bargi
Allen Bargi

Reputation: 15172

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}

Upvotes: 4

Related Questions