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

Question

试图找出如何在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; }

Answer 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;
  }
}