Как напрямую расширить родительский селектор SCSS? - PullRequest
Новая
       22

Как напрямую расширить родительский селектор SCSS?

0 голосов
/ 04 мая 2019

У меня есть следующий код: 

article.featured {
  h4 { margin-bottom: 20px }
  :first-child {
    height: 100%;
    padding-top: 0;
    padding-left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .img { @extend &; }
  }
  :last-child {
    padding-top: 0;
    padding-right: 0
  }
}

Это строка 10: 

.img { @extend &; }

Проблема в том, что когда я пытаюсь скомпилировать эту таблицу стилей, я получаю следующееошибка: 

Parent selectors aren't allowed here.
  ╷
10│     .img { @extend &; }
  │                    ^
  ╵
  stdin 10:20  root stylesheet on line 10 at column 20

Как решить эту ошибку и расширить элемент .img свойствами родительского (&) элемента?

1 Ответ

0 голосов
/ 04 мая 2019

Я обнаружил, что это работает, когда я перемещаю селектор .img рядом с селектором :first-child и меняю селектор на :first-selector, :first-selector .img.

Вот рабочий код ( ПРИМЕЧАНИЕ: строка 3): 

article.featured {
  h4 { margin-bottom: 20px }

  :first-child, :first-child .img {
    height: 100%;
    padding-top: 0;
    padding-left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  :last-child {
    padding-top: 0;
    padding-right: 0
  }
}

Который компилируется в: 

article.featured h4 {
  margin-bottom: 20px;
}

article.featured :first-child, article.featured :first-child .img {
  height: 100%;
  padding-top: 0;
  padding-left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

article.featured :last-child {
  padding-top: 0;
  padding-right: 0;
}
...