Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Created April 17, 2012 15:11
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chriseppstein/2406649 to your computer and use it in GitHub Desktop.
Save chriseppstein/2406649 to your computer and use it in GitHub Desktop.
If you have a module with placeholder selectors, this pattern will help you avoid outputting them twice if imported twice.
$module-placeholders-defined: false !default;
@mixin module-placeholders {
@if not $module-placeholders-defined {
$module-placeholders-defined: true;
%module-object { color: red; }
%module-object:hover { color: blue; }
}
}
@include module-placeholders;
@ravinggenius
Copy link

I must have missed something: what is %module-object?

@chriseppstein
Copy link
Author

In 3.2 % indicates a placeholder selector. It's like a class, but any selector it is used in will be omitted from the output unless it is extended.

@gogotanaka
Copy link

@chriseppstein

Thank you for letting me know a good way! It's very useful.

But, If I use this with extend, it's not so much beautiful...

$use_foo: false !default;
@mixin use_foo() {
  @if $use_foo {}
  @else {
    $use_foo: true;
    .foo {
      /* style definition here */
    }
  }
}
@include use_foo;

p .baa {
  @extend .foo;
}

Do you know a better way?(any sass version ok,)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment