SASS引导媒体查询/ sass文件

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

阅读有关如何将Sass文件编译为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

在最后一个示例中,我建议将媒体查询样式表导入main,这样您就不必编译一堆文件.

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