0

I have a map generator that add a post particle:

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

I used the mixin above in multiple situations to add the particle at the end, like:

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

I get the following error:

Invalid CSS after "&-none": expected selector, was "@"\n

What I want to have is:

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

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

This appears only when I us \@.

I can add it this particle when I create the class, but like I said I want to use it in multiple situations and to variate the particle base on conditions, so I need to be in mixin.

user3541631
  • 3,686
  • 8
  • 48
  • 115
  • I can help but you're calling `@include utility_generator` but your `@mixin` is called `generator`? Are you purposely running a loop? Are these typos. – joshmoto Aug 27 '18 at 16:00
  • thanks, edited, just a copy paste mistake, the name should be the same. yes I'm intentionally running a loop; there are multiple 'strings' that I want to add at the end of a class name – user3541631 Aug 27 '18 at 16:07
  • I'm with ya you want to run through an array and output the key in the class, gimme a few mins – joshmoto Aug 27 '18 at 16:24

1 Answers1

1

So this works...

$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;
    }
  }
}

See this sassmeister https://www.sassmeister.com/gist/324c3c0003a91eb676b00dfe1877cae0

But as soon as you add..

\@

..to your $infix variable key string, it throws an error!

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

I assume it is \@ that breaks your sass/css.

If you see What is the purpose of the '@' symbol in CSS? question you can only use @ symbol for (examples)...

/* 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);
}

Maybe ditch the \@ and your sass will run ok?

joshmoto
  • 4,472
  • 1
  • 26
  • 45
  • it is not working, the issue is with the special character. If I change in your code: $infix: '\@'; , will trow an error like in my code; I need something to tell sass, do not interpret/parse take it as a string – user3541631 Aug 27 '18 at 16:17
  • See updated answer though its answering it in a good. I'm just sure @content can pass variables through. Logically you think it would allow it. – joshmoto Aug 27 '18 at 17:29
  • just fixed all my typos sorry – joshmoto Aug 27 '18 at 17:52
  • yes, the issue was not with my mixin, but with the @ symbol. The solution I found was to use \\@; I'm testing the use of the @ to define a media query class, like col-7@sm – user3541631 Sep 03 '18 at 15:36