0

Say we need the a few different classes to use following:

color:#ccf;
background-color:#fcc;
font-size:0.7em;

How do we set this up in LESS?

These classes can NOT be used with each other so setting them up in a comma separated list (.note, .product, .restricted{ } ) is not a solution.

We need something like:

@myClass{
    color:#ccf;
    background-color:#fcc;
    font-size:0.7em;
}

.note{@myClass}
.product{@myClass}
.restricted{@myClass}

I tried this and it just kills LESS.

peterdotjs
  • 1,526
  • 1
  • 13
  • 19
BillyNair
  • 277
  • 4
  • 20

1 Answers1

4

You want to utilize LESS mixins:

.mixin-name() { //mixin which can be used by any selector
  color:#ccf;
  background-color:#fcc;
  font-size:0.7em;
}

.note {
  .mixin-name();
}

.product {
  .mixin-name();
}

.restricted {
  .mixin-name();
}
peterdotjs
  • 1,526
  • 1
  • 13
  • 19
  • Yes, tested, and this worked! I just don't know enough about LESS to know the terms to use. mixins was the keyword I needed. I also read that the parenthesis are optional, I don't suspect we will need them ,but why are they there at all? can you add more goodies in there, like some sort of arguments? – BillyNair Mar 11 '15 at 09:00
  • 1
    @BillyNair Yes they do allow you to not include the parenthesis but I think it makes the code more ambiguous. With parens, it is very clear it is a mixin versus a normal selector. The most typical use case for mixins is CSS3 support where you can pass as many arguments as you would like to the mixin. – peterdotjs Mar 11 '15 at 09:03