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

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

1 个答案: