Как в sass добавить правило медиа переменной?

Question

[Boris007]

Есть класс sidebar в который мы поместили медиа

.sidebar {
  width: 300px;

  @media screen and (min-width: 960px) {
    width: 500px;
  }
}

Как вынесли медиа в переменную?

@media screen and (min-width: 960px) {
    width: 500px;
}

Что бы можно было писать, что-то вроде

.sidebar {
  width: 300px;

  min-w960 {
    width: 500px;
  }
}

Comments

[Сергей delphinpro]

В переменную - никак. Только миксином.

Answer 1

[Ankhena]

Например, так

$md: 720px;
@mixin _md {
  @media (min-width: $md) {
    @content;
  }
}

.block {
  color: red;

  @include _md {
    color: blue
  }
}

Comments

[Boris007]

Спасибо!