Как в sass правильно оформить media через переменные?

Question

[Ispanec1998]

Есть значение ширины
$desktop: 1280px

Как сделать запись такой, чтобы в sass срабатывало медиа правило, где после переменной стили уже применяются только к ширине 1280px

.box
   width: 100%

   $desktop
      width: 50%

Answer 1

[Сергей delphinpro]

Так не выйдет.
Используйте миксины.

@mixin media-from($bp) {
  @media (min-width: $bp) {
    @content;
  }
}

.box {
   ...
   @include media-from($desktop) {
     ...
   }
}

Comments

[Ispanec1998]

Как-то давно случайно натыкался на пример, где все указывалось в два слова и без include
Что-то вроде

@minw desktop {...}
@maxw desktop {...}

Но как точно это было описано в самом подключенном файле не поинтересовался

[Ankhena]

Ispanec1998, в scss так:

@mixin _lg {
  @media (min-width: $lg) {
    @content;
  }
}

.modal-block {
    color: blue;

    @include _lg {
      color: red;
    }