Sass, @media “767px is not a valid css value”

Question

I can't run the project, because of this error.

Declaration :

$max767 : only screen and (max-width: 767px);

here is the code that is causing the problem :

@media #{$max767} {
  .fc-left,
  .fc-right,
  .fc-center {
    display: flex;
    float: none;
    justify-content: center;
    margin-bottom: $module-rem;
  }
}

thanks in advance.

Answer 1

You should declare $max767 in string format $max767: "(max-width : 767px)"

Answer 2

Your syntax is just a little off. This works:

$max767: “only screen and (max-width: 767px)”;
@media #{$max767} {
    /* css here */
}