CODEWITHSUNDEEP
cssless
anon
anon

Reputation:

Similar class-specific styling with LESS

I have the following example code:

div.box {
    width: 50px;
    height: 50px;
}

div.box.red { background: red; }
div.box.blue { background: blue; }
div.box.green { background: green; }
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>

This is quite redundant and I'm looking for a more efficient way to do this, I'm sure you can do this in LESS, but I just can't remember how.

I think it's the arrows, but it doesn't work as intended when I use them.

If there is some documentation upon all of the LESS symbols, please link me it so I can re-familiarize myself.

EDIT: Looking for something like this:

div.box {
    width: 50px;
    height: 50px;

    > .red { background: red; }
    > .blue { background: blue; }
    > .green { background: green; }
}
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>

Thanks =)

Upvotes: 0

Views: 67

Answers (2)

Ori Drori
Ori Drori

Reputation: 191946

You can do this using the LESS & selector:

div.box {
  width: 50px;
  height: 50px;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
  }

  &.green {
    background: green;
  }
}

Upvotes: 2

Johannes
Johannes

Reputation: 67748

You simply can do it like this:

div.box {
    width: 50px;
    height: 50px;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }
<div class="red box">R</div>
<div class="blue box">B</div>
<div class="green box">G</div>

Upvotes: 1

Related Questions