twitter-bootstrap SASS 引导媒体查询/sass 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20568344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SASS bootstrap media queries/sass files
提问by wilcode
I'm trying to make a responsive website with SASS Bootstrap but I'm having problems with sass stylesheets.
我正在尝试使用 SASS Bootstrap 制作一个响应式网站，但我在使用 sass 样式表时遇到了问题。
When I include the sass version of my style sheet it only picks out certain elements of my HTML, like the top level elements, not anything that is inside a row or a column, whereas the CSS version works perfectly fine.
当我包含样式表的 sass 版本时，它只挑选出我的 HTML 的某些元素，如顶级元素，而不是行或列中的任何内容，而 CSS 版本则工作得非常好。
I have also made a separate stylesheet for my media queries and it is not responding!
我还为我的媒体查询制作了一个单独的样式表，但它没有响应！
Head:
头：
<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">
Scripts:
脚本：
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/sass-bootstrap.min.js"></script>
Media Queries:
媒体查询：
$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;
}
}
I'm probably doing something wrong but if anyone could be of any help I would appreciate it.
我可能做错了什么，但如果有人能提供任何帮助，我将不胜感激。
采纳答案by Joseph Spens
Read about how to compile Sass files into CSS
Basically you just need to compile them:
基本上你只需要编译它们：
$ gem install sass
$ sass sass/main.scss main.css
$ sass sass/media-screens.scss media-screens.css
Then edit this in your html
然后在你的 html 中编辑它
<link href="main.css" rel="stylesheet">
<link href="media-screens.css" rel="stylesheet">
I would recommend settings up the watch task for fast development
我建议设置监视任务以进行快速开发
$ sass --watch main.scss:main.css
In that last example, I would recommend importingyour media query stylesheet into main so you don't have to compile a bunch of files.
在最后一个示例中，我建议将您的媒体查询样式表导入 main 中，这样您就不必编译一堆文件。
And even better, use an automated build tool like Gruntto do all of this for you.
更好的是，使用像Grunt这样的自动化构建工具来为您完成所有这些工作。
回答by Nizam Kazi
// 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)";
Write down your device list like above, customize break-points. Use #{ }while using it in SCSS. Also make sure you are using compassbecause it is using helper method of compass.
像上面一样写下您的设备列表，自定义断点。在 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;
}
}
回答by Slawa Eremkin
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">
Looks that you use scss files in your page, but Browser doesn't support scss files. First of all you need compile your scss files to css files, maybe Scount app can help you: http://mhs.github.io/scout-app/
看起来您在页面中使用了 scss 文件，但浏览器不支持 scss 文件。首先你需要将你的 scss 文件编译成 css 文件，也许 Scount 应用程序可以帮助你：http://mhs.github.io/scout-app/
回答by wilcode
Thanks for your advice Joseph. I added my media queries to the bottom of my stylesheet but the main problem was because I didn't have my screens set to the correct widths. I ended up with the following:
谢谢你的建议约瑟夫。我将媒体查询添加到样式表的底部，但主要问题是因为我没有将屏幕设置为正确的宽度。我最终得到了以下结果：
/* 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;) {}
