Ampersand logic in mixin.

[dimondevs]

Hi Hugo. I really admire your creativity and effort to contribution to SASS and development in general. I follow your case studies and actively use them in my projects.

I’ve got task to make theming for web site earlier this week. I’ve searched for it in google and found a good solution in your article. I modified it a bit and found a solution to my issue. The only problem is connected with conflict in mixin which belong to you also @mixin on-event(). When I adding the class .no-touchevents to it I’m excluding event on touch devices. Here is the sample with this issue: example.

To sum up, it comes out that .t-dark and .no-touchevents were added to html tag but mixin generates .t-dark .no-touchevents cascade. It would be great to get something like finally:

.card {
  color: #fff;
}
.t-dark .card {
  color: #000;
}
.no-touchevents .card:hover {
  color: #000;
}
.t-dark.no-touchevents .card:hover {
  color: #fff;
}

I will really appreciate to get reply from you and solve this issue. Thanks a lot.

[KittyGiraudel]

Hello and thank you for the kind words. I think this would be a way to work around this problem: https://www.sassmeister.com/gist/e9890ad3d582571616c8b1f406d93959. What do you think?

[dimondevs]

More thanks for the prompt reply. On sassmeister works as it is necessary, and here at me on node-sass swears.

markup/static/scss/entry/abstracts/_mixins.scss
Error: Invalid null operation: "".t-dark " plus null".
        on line 188 of markup/static/scss/entry/abstracts/_mixins.scss
>>             '.t-#{$theme} ' + &
   ------------^

Why does he think that there is not a line, but shows null?

[KittyGiraudel]

Which version are you running?

[dimondevs]

Sorry, I updated the gulp-sass and it all worked. You are a wonderful person. Thank you for your help!

[KittyGiraudel]

Glad I could help. :)

[dimondevs]

Good afternoon dear Hugo. Thank you for your help last time. But there was a problem. Everything was fine until I added new rules via commas. Because of this, t-dark is placed only on the first in the list, and then ignored. Could you help me with this? Example problem

[KittyGiraudel]

Alright, let’s do it the clean way then.

@mixin themify($themes) {
  @each $theme-name, $theme-map in $themes {
    $selector: if(
      $__updating-root,
      selector-append('.t-#{$theme-name}', &),
      selector-nest('.t-#{$theme-name}', &)
    );

    @at-root #{$selector} {
      $theme-map: $theme-map !global;
      @content;
      $theme-map: () !global;
    }
  }
}

I also took the liberty to prune your code a little bit. You were doing unnecessary manipulations. :)

[dimondevs]

Very interesting, thanks for this prompt decision.

[KittyGiraudel]

For the record, here is the documentation for these two selector functions:

• http://sass-lang.com/documentation/Sass/Script/Functions.html#selector_nest-instance_method
• http://sass-lang.com/documentation/Sass/Script/Functions.html#selector_append-instance_method

[dimondevs]

Yes, I read about them even earlier. But did not understand where exactly the problem. In sass as it is difficult to debug the code.

[KittyGiraudel]

A few tips:

• You can use inspect(..) to print a string representation of any value.
• You can use a dummy property inside a mixin to see the content of a variable (e.g. debug: …;).
• The current selector (&) is always a 2-levels list: the first level is for parallel selectors (comma separated, a z, b y, c x), the second one is for components within a selector (space separated, a z).

[dimondevs]

Thank you for your help. I will definitely try to use your advice in the matter.