Sass интерполяция

Question

Я пытаюсь получить доступ к атрибуту с интерполяцией (Saas 3), но получаю ошибку.

    @each $icons in myPic1, myPic2 {
        [data-type=#{$icons}] span {
        background: url("/path/to/#{$buttons}.png") no-repeat scroll 50% 50%;}
    }

ошибка exec: Ошибка: Команда не выполнена: (sass): 96: Неверный CSS после "... [data-type = ": ожидаемый идентификатор или строка, была" # {$ icons}] span {"(Sass :: SyntaxError)

Как получить доступ к атрибутам в этом случае?

Answer 1

Если вы окружите свою интерполяцию двойными кавычками, она будет работать:

@each $icons in myPic1, myPic2 {
  [data-type="#{$icons}"] span {
  background: url("/path/to/#{$buttons}.png") no-repeat scroll 50% 50%;}
}

Я не уверен почему. В CSS строки могут быть заключены в кавычки или без кавычек. Как вы можете видеть в эту интересную статью о кавычках в строках в CSS :

Итак, допустимым значением атрибута без кавычек в CSS является любая строка текста, которая не является пустой строкой, состоит из экранированных символов и / или символов, совпадающих с / [-_ \ u00A0- \ u10FFFF] / полностью, и не начать с цифры или двух дефисов или дефиса, за которыми следует цифра.

Значения, которые вы используете, являются правильными строками без кавычек.

SASS также принимает оба типа строк: в кавычках и без кавычек. [data-type=myPic1] и [data-type="myPic2"] будут правильно скомпилированы. Но по какой-то причине, если вы используете интерполяцию, вы должны процитировать ее.