使用Sass在Bootstrap中自定义媒体查询

Question

我想将我的screen-sm变量调整为800px。在导入sass引导之前定义这个变量工作正常，但仍然当我的屏幕切换到768px我有一个断点和768px的媒体查询那里。

主要SCSS：

$screen-sm: 800px !default; 
$screen-sm-min: $screen-sm !default; 
$screen-tablet: $screen-sm-min !default; 

@import 'sass-bootstrap/lib/bootstrap'; 

这是我在开发工具看到768px和800像素之间：

@media (min-width: 768px) 
.container { 
    width: 750px; 
} 

哪里引导采取从这个最小宽度值和如何调整它？

Answer 1

尝试删除!default。这里没有必要，因为引导程序已经设置为!default。您正在覆盖默认值。

从SASS文件：

您可以分配到变量，如果它们尚未加入默认的标志值的分配结束！这意味着如果变量已经被赋值，它将不会被重新赋值，但是如果它还没有赋值，它将会被赋值。

Main.scss现在应该是这样的：

$screen-sm: 800px; 
$screen-sm-min: $screen-sm; 
$screen-tablet: $screen-sm-min; 

@import 'sass-bootstrap/lib/bootstrap';