视口的未定义变量bootstrap

Question

我正在尝试设置填充，具体取决于视口是lg还是md在bootstrap我的代码是：

    @media (min-width: $screen-lg-min) {
        #logo-text {
          padding-top: 1.3em; 

        } 
      }

      @media (max-width: $screen-md-max) {
        #logo-text {
          padding-top: 1em;
        }
      }

似乎在我运行时它会显示未定义的变量：“$ screen-lg-min”。有谁知道这里发生了什么？我检查了bootstrap文件，在_variables.scss中有一个带有该名称的变量。

这段代码是用application.css.sass样式表编写的，因为我正在使用gem bootstrap-sass

    @import 'bootstrap';
    @import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption);
    @import url(http://fonts.googleapis.com/css?family=Prosto+One);

    body {
      background-color: black;

      .content-wrapper
      {
        position: absolute;
        width: 70%;
        margin: 0 auto;
        height: 50em;
        background-color: white;
        margin-top: 6%;
      }
    }

我正在尝试在兄弟header.css.sass文件中设置视口，我的代码是

header {

  img {

    margin: 5px 0 0 5px;    
  }

  @media (min-width: $screen-lg-min) {
    #logo-text {
      padding-top: 1.3em; 

    } 
  }

  @media (max-width: $screen-md-max) {
    #logo-text {
      padding-top: 1em;
    }
  }

  #logo-text {
    font-size: 3.5em;
    color: #403A2C;
    font-family: 'PT Sans Caption', sans-serif;
  }

  nav ul {

    text-decoration: none;
    list-style-type: none;

    li {      

      font-size: 1.5em;    
      float: right;      
      display: inline-block;
      margin: 16% 1em 0 0;
      padding: .5em .5em;           

      a {

        font-family: 'Prosto One';
        font-weight: bold;
        color: #403A2C;
      } 

      a:hover {

        color: #777D95;   
        text-decoration: none;     
      }
    }
  }
}