Jekyll 内置 Sass 支持媒体查询生成答案

【问题标题】：Jekyll built-in Sass support media queries generationJekyll 内置 Sass 支持媒体查询生成
【发布时间】：2018-09-14 15:38:31
【问题描述】：

试图弄清楚如何在 Jekyll 中通过 Sass 使用媒体查询。目前它对我不起作用。

版本：Jekyll 3.8.3

styles.sass

.nav-gallery li
@media (min-width: 768px)
	border-bottom: none
	display: inline-block
	border: 1px solid white

@media (min-width: 768px)
.nav-gallery li
	border-bottom: none
	display: inline-block
	border: 1px solid white

@media (min-width: 768px)
	.nav-gallery li
	border-bottom: none
	display: inline-block
	border: 1px solid white

编译的 CSS 表单：

@media (min-width: 768px) {
  border-bottom: none;
  display: inline-block;
  border: 1px solid white; }
  
.nav-gallery li {
  border-bottom: none;
  display: inline-block;
  border: 1px solid white; }

@media (min-width: 768px) {
  border-bottom: none;
  display: inline-block;
  border: 1px solid white; }

【问题讨论】：

你的预期输出是什么？
anderssonola, @media (min-width: 768px){ .nav-gallery li{border-bottom: none display: inline-block border: 1px solid white}} 在css生成的styles.css文件中在 jekyll 将使用我的 styles.sass 文件之后。我可以清楚地通过 .scss 文件，但是通过 sass 生成有一些我无法弄清楚的规则 - 如何使媒体查询工作生成到 .css

标签： html css sass jekyll

【解决方案1】：

您的缩进似乎不一致。 Sass 会对你这样做（不像 scss 更关心花括号{}）。

试试这个

.nav-gallery li
  @media (min-width: 768px)
    border-bottom: none
    display: inline-block
    border: 1px solid white

@media (min-width: 768px)
  .nav-gallery li
    border-bottom: none
    display: inline-block
    border: 1px solid white

@media (min-width: 768px)
  .nav-gallery li
    border-bottom: none
    display: inline-block
    border: 1px solid white

编译后的 CSS 查看CodePen

@media (min-width: 768px) {
  .nav-gallery li {
    border-bottom: none;
    display: inline-block;
    border: 1px solid white;
  }
}

@media (min-width: 768px) {
  .nav-gallery li {
    border-bottom: none;
    display: inline-block;
    border: 1px solid white;
  }
}
@media (min-width: 768px) {
  .nav-gallery li {
    border-bottom: none;
    display: inline-block;
    border: 1px solid white;
  }
}

【讨论】：

WhosDustin，谢谢，也尝试了您的版本，所有这三个选项都由 jekyll 编译为不工作的 .css 文件，就像我之前在帖子中粘贴的那样，没有一个可用的 css 规则。似乎是 jekyll 的错，在它的文档中没有找到任何东西。
你是如何导入你的 sass 文件的，在什么目录下？ *.sass 文件是否在 _sass 文件夹中，然后导入到 css/main.sass？我问的原因是我使用 Sass 和 Jekyll 并且它工作正常。你激发了我的好奇心。
joxi.ru/Vm6lgGkcD8GL1A - 服务器运行没有任何错误； _config.yml joxi.ru/zANGKbQFB0ekkr，styles.css joxi.ru/Dr8jGDoi45w8E2； index.sassjoxi.ru/D2PGal6Fp80PKm.jpg; index.sass 由 2-layouts_dir.sass 通过 '@import "index"' 导入，而不是由 styles.sass 通过 '@import "2-layouts/2-layouts_dir.sass"' joxi.ru/a2XE1L7i1Wq8qA 和 joxi.ru/Dr8jGDoi45wXZ2