How can I utilize the @screen-sm, @screen-md, and @screen-lg variables without encountering errors in Rails when using the bootstrap-sass gem?
Whenever I substitute pixel values for the @screen-sm, @screen-md, and @screen-lg variables, the browser errors disappear. However, if I use these variables as intended, the Rails error indicates that the arguments are invalid.
I am working with bootstrap-sass 3.0.3.
In my application.js file, I have included //=require bootstrap.
Although the Github page https://github.com/twbs/bootstrap-sass suggests that this might lead to variables being unavailable in other files, even after removing this line from my js file, I still couldn't access the variables in my application.css.scss file.
application.css.scss
*= require_self
*= require_tree .
*/
@import "bootstrap";
/* Small devices (tablets, 768px and up) */
@media only screen and (min-width: @screen-sm){
}
/* Medium devices (desktops, 992px and up) */
@media only screen and (min-width: @screen-md){
}
/* Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: @screen-lg){
}
Gemfile
... [Gemfile content remains unchanged]