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

Question

试图找出如何在 Jekyll 中将媒体查询与 Sass 结合使用。目前它对我不起作用。

版本:杰基尔3.8.3

样式.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;
  }
}