Why i can't change a less global variable in a @media element

[ghost]

The varibles are all static in less.

In this code:

.a() {
  background-color: #000;
}

@media screen and (max-width: 700px) {
  .a() {
    background-color: #fff;
  }
}

body {
  .a();
}

In any case, the background color of body is black.

How can i change the background-color without JavaScript?

[matthew-dean]

It's unclear what CSS you're trying to get to.

[ghost]

Thanks. I want to change the background color of the body element, when the width of window is changed.

I had understood it. The variables in Less are static variables, so it is not possible to change the background color when the width of window is change. I have to use the var function in CSS. All in all, thanks for your answer.