Question

我试图使用SASS Bootstrap创建一个响应式网站，但我遇到了sass样式表的问题。

当我包含我的样式表的sass版本时，它只选择我的HTML的某些元素，如顶级元素，而不是行或列内的任何内容，而CSS版本完全正常。

我还为我的媒体查询制作了一个单独的样式表，它没有响应！

目：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/sass-bootstrap.css" rel="stylesheet">
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

脚本：

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/sass-bootstrap.min.js"></script>

媒体查询：

$screen-lg-min: 1200px;
$screen-md-min: 992px;
$screen-sm-min: 768px;

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Sass Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { 

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { 

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}

我可能做错了什么但是如果有人可以提供任何帮助我会很感激。

Answer 1

Read about how to compile Sass files into CSS

基本上你只需要编译它们：

$ gem install sass
$ sass sass/main.scss main.css
$ sass sass/media-screens.scss media-screens.css

然后在你的html中编辑它

<link href="main.css" rel="stylesheet">
<link href="media-screens.css" rel="stylesheet">

我建议设置监视任务以进行快速开发

$ sass --watch main.scss:main.css

在最后一个示例中，我建议将importing您的媒体查询样式表放入main中，这样您就不必编译一堆文件。

更好的是，使用像Grunt这样的自动构建工具为您完成所有这些工作。

Answer 2

// DEVICE LIST //
$xs-min: "only screen and (min-width:none)";
$xs-max: "only screen and (max-width:520px)";
$xs-sm: "only screen (min-width: none) and (max-width:767px)";

$sm-min: "only screen and (min-width:768px)";
$sm-max: "only screen and (max-width:991px)";
$sm-md: "only screen (min-width: 768px) and (max-width:991px)";

$md-min: "only screen and (min-width:992px)";
$md-max: "only screen and (max-width:1199px)";
$md-lg: "only screen (min-width: 992px) and (max-width:1199px)";

$lg-min: "only screen and (min-width:1200px)";
$lg-max: "only screen and (max-width:none)";

如上所述记下您的设备列表，自定义断点。在SCSS中使用 ＃{} 。还要确保使用指南针，因为它正在使用指南针的辅助方法。

/* Small devices (tablets, 768px and up) */
@media #{$sm-min} { 

}

/* Medium devices (desktops, 992px and up) */
@media #{$md-min} { 

}

/* Large devices (large desktops, 1200px and up) */
@media #{$lg-min} { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}

Answer 3

<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

看起来您在页面中使用scss文件，但浏览器不支持scss文件。首先，您需要将scss文件编译为css文件，也许Scount应用程序可以帮助您：http://mhs.github.io/scout-app/

Answer 4

感谢你的建议约瑟夫。我将媒体查询添加到样式表的底部，但主要问题是因为我没有将屏幕设置为正确的宽度。我最终得到了以下内容：

/* Extra Small devices (mobiles, 320px and up) */
@media (min-width: 320px) and (max-width: 767px) {}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1920px;) {}

SASS引导媒体查询/ sass文件

4 个答案: