Встроенная поддержка Jassy в медиа-запросах Sass - PullRequest
Новая
       22

Встроенная поддержка Jassy в медиа-запросах Sass

0 голосов
/ 14 сентября 2018

Попытка выяснить, как я могу использовать медиа-запросы с Sass в Jekyll.На данный момент это не работает для меня.

версия: 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; }

1 Ответ

0 голосов
/ 18 сентября 2018

Ваш отступ кажется непоследовательным.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;
  }
}
...