Add the styles from one class to another class with LESS

Question

I have 2 classes with different styles. Can I apply the styles from one class to another when within a media query with LESS?

So with the following CSS an element with a class of .one is blue but not bold. With a set media query I also want it to be bold and 2ems.

.one {
 color: blue;
}

.two {
 font-weight: bold;
 font-size: 2em;
}

Answer 1

Try

.one {
 color: blue;
}

.two {
 font-weight: bold;
 font-size: 2em;
}
@media screen {
   .one{
       .one;
       .two;
   }
}

will create this css:

.one {
  color: blue;
}
.two {
  font-weight: bold;
  font-size: 2em;
}
@media screen {
  .one {
    color: blue;
    font-weight: bold;
    font-size: 2em;
  }
}

Answer 2

:extend can do this. In the code below if .class2 is in a media query then for that width the styles from .class will be applied.

.class {
  some rules here 
}

.class2 {
    &:extend(.class);
    ...
}

Does LESS have an "extend" feature?

Answer 3

You can use a mixin and a variable for the color

@default_color : "#000";
@color : blue;

.font-style(@c: @default_color) {
  color: @c;
  font-weight: bold;
  font-size: 2em;
}

.one {
 color: @color;
}

.two {
  .font-style()
}

@media (max-width:420px) { 
  .one {
    .font-style(@color)
  }
}

Codepen demo

In the demo above, resize the window to lesser width and you will find the text changing it's style.