Передача значения из миксина в класс с использованием экранированных символов - PullRequest
Новая
       3

Передача значения из миксина в класс с использованием экранированных символов

0 голосов
/ 27 августа 2018

У меня есть генератор карт, который добавляет частичку сообщения: 

@mixin generator {
  @each $key, $value in $config {
        $infix: '\@#{$key}' !global;
        @content
      }
    }

Я использовал миксин выше в нескольких ситуациях, чтобы добавить частицу в конце, например: 

.y- {
  @include generator {
    &-n#{$infix} {
      display: none !important;
    }
    &-in#{$infix} {
      display: inline !important;
    }
  }
}

Я получаю следующую ошибку:

Недопустимый CSS после "& -none": ожидаемый селектор был "@" \ n

То, что я хочу иметь: 

.y-n@key_name1{
    display: none !important;
}

.y-n@key_name2{
        display: none !important;
    }

Это появляется только тогда, когда я \@.

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

1 Ответ

0 голосов
/ 27 августа 2018

Так что это работает ... 

$config: (
  1: 'a',
  2: 'b',
  3: 'c'
);

@mixin generator {
  @each $key, $value in $config {
        $infix: '-#{$key}' !global;
        @content
      }
    }

.y- {
  @include generator {
    &-n#{$infix} {
      display: none !important;
    }
    &-in#{$infix} {
      display: inline !important;
    }
  }
}

Посмотри этого сассмейстера https://www.sassmeister.com/gist/324c3c0003a91eb676b00dfe1877cae0

Но как только вы добавите .. 

\@

.. в вашу $infix строку с переменным ключом, она выдает ошибку! 

$infix: '\@#{$key}' !global;

Я полагаю, что \@ нарушает ваш sass / css.

Если вы видите Какова цель символа '@' в CSS? вопрос, который вы можете использовать только для символа @ (примеры) ... 

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

Может, откажитесь от \@ и ваш sass будет работать нормально?

...