Q:

Bootstrap Media Queries in Sass - Why Sass cannot read @screen-md-min?

I have the following code snippet in my SCSS to modify the CSS according to device size.
.cu-list-project li{
  @media (min-width: @screen-md-min) {
    width: 60%;
    @include project-list;
  }
}

But Sass gives the following error:

*error styles/sass/styles.scss (Line 108: Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was
  "@screen-md-min) {").

Apparently, "@screen-md-min" is not recognized by Sass. What should I do?
P.S: I know I can change @screen-md-min to 992px but this will not be a best practice. So, I'm looking for a real solution not a workaround. thanks.

A:

Looking at the source code for the bootstrap-sass, you should use $screen-md-min e.g.
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  @include responsive-visibility('.visible-md');
}

From line 89 on Github

