CODEWITHSUNDEEP
less
Fowowski
Fowowski

Reputation: 132

Overriding the LESS values in conjunction with mixins

I have a very basic less code:

.make-red {
    background: red;
    width: 50px;
}

.make-green {
    background: green;
    height: 50px;
}


.make-red.make-green {
    background: yellow;
    border: 5px solid black;
    padding: 20px;
}


#content {
    .make-red;
    .make-green;
}

I would like it to be accessible and executable in two ways.

  1. adding classes in the html layer wiil give you mixed result or
  2. using mixins in the less file so that user wont be forced to use classes in the html layer

as you can see - i've got two classes - one makes background red and other one makes is green but when they are used together i would like to apply some changes.

after compiling this particular portion of code the result wont be beautiful:

.make-red {
  background: red;
  width: 50px;
}
.make-green {
  background: green;
  height: 50px;
}
.make-red.make-green {
  background: yellow;
  border: 5px solid black;
  padding: 20px;
}
#content {
  background: red;
  width: 50px;
  background: green;
  height: 50px;
}

The #content has now duplicated background rules and it's not yellow as I would like it to be.

Im definitely making something wrong and I would be very appreciated if someone could describe me where is the logical problem.

Upvotes: 1

Views: 192

Answers (1)

mkhelif
mkhelif

Reputation: 1559

In the #content you are applying both green and red, thus you have twice background and width defined in CSS output.

You have to define an other mixin and use it when both red and green class are present or for the #content:

.make-red {
    background: red;
    width: 50px;
}

.make-green {
    background: green;
    height: 50px;
}

.make-yellow {
    background: yellow;
    border: 5px solid black;
    padding: 20px;
}

.make-red.make-green {
    .make-yellow;
}

#content {
    .make-yellow
}

Upvotes: 1

Related Questions