Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

why doesn't string variable containing @media work? #2434

Closed
719media opened this issue Jan 3, 2018 · 2 comments
Closed

why doesn't string variable containing @media work? #2434

719media opened this issue Jan 3, 2018 · 2 comments

Comments

@719media
Copy link

719media commented Jan 3, 2018

why doesn't this work?

$test:  '@media (max-width: 699px)';

.thingamabob {
  #{$test} {
    color: yellow;
  }
}

but a normal selector does:

$test:  '.some-class';

.thingamabob {
  #{$test} {
    color: yellow;
  }
}
@nex3
Copy link
Contributor

nex3 commented Jan 4, 2018

This is due to the order in which Sass parses different syntactic forms. When the parser first parses the document, it decides what each rule is—whether it's a style rule, a media directive, or something else entirely. Interpolation, like the #{$test} in your example, is classified as a style rule. Then when it executes the stylesheet, it tries to parse whatever the contents of the rule are as a selector. @media (max-width: 699px) isn't a valid selector, so this parsing fails.

If you're trying to dynamically choose between a selector or a media query, I suggest using a mixing with a @content directive.

@nex3 nex3 closed this as completed Jan 4, 2018
@719media
Copy link
Author

719media commented Jan 5, 2018

Thanks for the documentation pointer, I'll read it over. The problem is that I wanted a single user defined variable to be used, and I wanted the user to be able to use either
$hover-setting: '.custom-selector';
or
$hover-setting: '@media (hover: hover);

for use in a mixin like

@mixin hover {
  #{$hover-setting} {
    &:hover { @content; }
  }
}

but, it appears I'll have to use just two variables, and do something like

@mixin hover {
  @if $hover-selector {
    #{$hover-selector} {
      &:hover { @content; }
    }
  } @else if $hover-media {
    @media #{$hover-media} {
      &:hover { @content; }
    }
  } @else {
    &:hover { @content; }
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants