How to properly write media queries sass?

Question

Sass

Good afternoon! I read on the bootstrap off site that you can use queries like:

@include media-breakpoint-up(576px) {
  .some-class {
    display: block;
  }
}

As a result, I get an error like:

@include media-breakpoint-up(576px)
            ^
          No mixin named media-breakpoint-up

It looks like everything is connected. What could be the problem?

Answer 1

First, the name of the breakpoint must be passed to the parameter.
Second, you didn't include the bootstrap grid mixins in your file at all.
You need to include two files, then call mixins

@import 'bootstrap/variables';
@import 'bootstrap/mixins';

@include media-breakpoint-up(sm) {

}

Pay attention to the mixin parameter. Breakpoint names https://github.com/twbs/bootstrap/blob/b7040ad9b4/...