Skip to content

Instantly share code, notes, and snippets.

@starryeyez024
Created October 22, 2014 14:56
Show Gist options
  • Select an option

  • Save starryeyez024/0da213a93c3c0a114257 to your computer and use it in GitHub Desktop.

Select an option

Save starryeyez024/0da213a93c3c0a114257 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="test">test</div>
<div class="test1">test 1</div>
<div class="test2">test 2</div>
<div class="test3">test 3</div>
<div class="test4">test 4</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// THE SELF-AWARE MIXIN
// define global map to store info about this mixin
$my-mixin-info: ();
// define mixin with any format of arguments
@mixin my-mixin($pos1, $pos2, $map: (), $rest...) {
// capture some or all of the arguments,
// according to whatever repetitions you want to avoid
$my-args: ($pos1, $pos2, $map);
// look up these arguments as a key in the global map
$id: map-get($my-mixin-info, $my-args);
// if they return an 'ID'...
@if $id {
// extend that ID
@extend %#{$id};
// output any specific stuff
specific: inspect($rest);
}
// otherwise...
@else {
// create the ID
$id: unique-id();
// merge the ID in to the mixin's map against the ARGS
$my-mixin-info: map-merge($my-mixin-info, ($my-args: $id)) !global;
// create a placeholder named after the ID at root
@at-root {
%#{$id} {
// output the stuff you want to not repeat
common: inspect($my-args);
}
}
// extend that placeholder
@extend %#{$id};
// output any specific stuff
specific: inspect($rest);
}
}
.test {
@include my-mixin(1, 2, (), 4, 5);
}
.test2 {
@include my-mixin(1, 2);
}
.test3 {
@include my-mixin(1, 2, (), 6, 7);
}
.test {
specific: 4, 5;
}
.test, .test2, .test3 {
common: 1, 2, ();
}
.test2 {
specific: ();
}
.test3 {
specific: 6, 7;
}
<div class="test">test</div>
<div class="test1">test 1</div>
<div class="test2">test 2</div>
<div class="test3">test 3</div>
<div class="test4">test 4</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment