Generate unique indentifiers during a compilation run

[chriseppstein]

An issue comment raised an interesting use case for creating unique identifiers. Without objection, I'll add a helper function to do this.

Note: the implementation for the unique number generation will be better than can be found in my gist in the comment thread. I intend to use ruby's Fixnum#succ method so that unique generation is fast, but I will start with a different number each time so that people don't try to depend on quasi-predictable output.

[nex3]

I'm not sure I completely understand the use case for this. If you're generating a unique identifier just to extend it locally, why not just add the properties manually?

[chriseppstein]

why not just add the properties manually?

I assume you mean "Why not just rewrite the base selector manually". The benefits of @extend are just as realizable in a local context as they are in a more global context. Manual selector rewriting is an inversion of control that is also difficult to express correctly in pure sass. What's more, this enables strategies like so:

$current-module: null;
$current-module-base: null;

@mixin module($name) {
  $old-module: $current-module;
  $old-module-base: $current-module-base;
  $current-module: $name;
  $current-module-base: unique-id();
  %#{$current-module-base} {
     stuff: here;
   }
  @content;
  $current-module: $old-module;
  $current-module-base: $old-module-base;
}

@include module(foo) {
  #whatever { @extend #{$current-module-base} }
}

Note: the above code would really clean up if we could pass arguments to the content block from the mixin.

[nex3]

That example seems like you could just set $current-module-base to module-#{$name} or something similar. I'm also not sure what the purpose of the styles in %#{$current-module-base} is.

I really want to see a concrete example of the utility of this function.

[chriseppstein]

https://gist.github.com/chriseppstein/9a9e557412cc4afb67b6

[nex3]

I don't understand why banner-bg isn't written like

@mixin banner-bg($height, $bgColor, $opacity: null, $extends: null) {
    @extend %bannerbg;

    &, &:before {
        height: $height;
        background-color: $bgColor;
        @if $extends != null {@extend #{$extends}}
    }

    &:before{
        @if $opacity != null {@include opacity($opacity)} 
        content: "";
        position: absolute; 
        right: 0;
        left: 0;
        z-index: -100;
    }
}

[chriseppstein]

Because media queries.

[nex3]

It looks like %bannerbg will prevent both versions of this mixin from working across media boundaries.

[chriseppstein]

Closed by f3be0f4