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

Question

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

版本： 杰基尔 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视图代码笔

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