CODEWITHSUNDEEP
cssless
Scott Pedder
Scott Pedder

Reputation: 57

Declare less variable based on body ID

I would like to have a different color for a variable based on the body id

<body id="theme1">

#theme1{
    @brand-color:red;
}
#theme2{
    @brand-color:green;
}

h1{color:@brand-color}

Upvotes: 0

Views: 122

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42374

You don't use Less variables as CSS properties, but rather as values. What you need to do is define two different variables that are associated to the two colours you want, and then call the relevant variable based on the theme ID:

<body id="theme1">
<body id="theme2">

@brand-color-1: red;
@brand-color-2: green;

#theme1 {
  color: @brand-color-1;
}
#theme2 {
  color: @brand-color-2;
}

This will compile to the following (with <div> in place of <body>):

#theme1 {
  color: red;
}
#theme2 {
  color: green;
}
<div id="theme1">
  Theme 1
</div>
<div id="theme2">
  Theme 2
</div>

Hope this helps! :)

Upvotes: 2

Jay Patel
Jay Patel

Reputation: 2451

While you are dealing with id you have to use # sign for css

. sign is used for class selectors

Modify your code like this

<body id="theme1">

#theme1{
    @brand-color:red;
}
#theme2{
    @brand-color:green;
}
h1{
    color:@brand-color
}

Upvotes: -1

Related Questions