Является ли. # {$ Pretty - class-name} методом нахальной интерполяции?

Question

I нашел приятную страницу для отображения переключателей (флажки, радио, слайдер и т. Д.). Прошло много времени с тех пор, как я закодировал html / sass, и я немного озадачен этим битом .#{$pretty--class-name}.

Я думал, что вы либо использовали точку или хэш. Но здесь вы используете оба. Это особенность SASS, где он заменяет #{$pretty--class-name} именем переменной?

Я нашел этот бит в документации SASS :

Иногда пользователи хотятиспользовать интерполяцию для определения имени переменной на основе другой переменной. Sass не позволяет этого, потому что с первого взгляда намного сложнее определить, где и где определены переменные. Однако вы можете определить карту из имен в значения, к которым затем можно получить доступ с помощью переменных.

Но в приведенном ниже примере не используется тот же метод.

$pretty--class-name: pretty !default;

.#{$pretty--class-name} {
  position: relative;
  display: inline-block;
  margin-right: 1em;
  white-space: nowrap;
  line-height: 1;
}

Answer 1

Упомянутая вами документация относится только к созданию переменных на лету на основе других переменных, а в SASS это невозможно: вам нужно использовать карту, чтобы сделать нечто подобное. В вашем случае для создания класса есть только метод интерполяции, а не другая переменная SASS.

Так .#{$pretty--class-name} является примером синтаксиса интерполяции SASS , который генерирует .pretty класс.

PS Кстати, эта страницадействительно мило. Спасибо, что поделились этим!