Блог

Главная - Вопросы по программированию - Dart SCSS отклоняет синтаксис $

Dart SCSS отклоняет синтаксис $

#dart #sass #scss-mixins #codekit

#dart #sass #scss-mixins #codekit

Вопрос:

Я использую Codekit для компиляции и обработки SCSS , и недавно было рекомендовано перейти с Liblass на Dart , для будущей проверки.

Это кажется простым переключением, однако у меня есть один фрагмент кода, который выдает ошибку во время компиляции. Интересно, может ли кто-нибудь помочь? Ошибка: Dart Sass failed with this error: Error: expected "$".

Рассматриваемый код предназначен для перебора нескольких элементов nth-child() и постепенного применения к ним задержки перехода, увеличивающейся на 150 мс для каждого элемента.

 @for $i from 1 to 50 {
  amp;:nth-child($i) { transition-delay: calc($i * 150ms); }
}

Спасибо.

Ответ №1:

Вам нужно интерполировать переменную:

 @for $i from 1 to 50 {
  amp;:nth-child(#{$i}) { transition-delay: calc(#{$i} * 150ms); }
}

Комментарии:

1. Спасибо. Это позволяет коду компилироваться, однако он выводится в файл .css следующим образом: :nth-child(#{1}), что означает, что он не работает во внешнем интерфейсе, он должен быть : :nth-child(1)

2. Это действительно странно! Он отлично работает на SassMeister. Можете ли вы попробовать пример цикла , приведенный в официальной документации, и посмотреть, работает ли он?

3. К сожалению, не повезло, происходит точно такая же ошибка.

4. Похоже, в моем исходном коде есть ошибка в SassMeister

5. Я отредактировал свой ответ, чтобы добавить интерполяцию в calc() функцию, потому что это также требуется здесь. Что касается теста на SassMeister, вам нужно поместить свой код в родительский селектор, поскольку он использует amp; . Если официальный пример даже не работает для вас, тогда проблема исходит из другого места…