Skip to content

Instantly share code, notes, and snippets.

@aarontam
Created June 11, 2015 22:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aarontam/3b58fd4df0acdd906849 to your computer and use it in GitHub Desktop.
Save aarontam/3b58fd4df0acdd906849 to your computer and use it in GitHub Desktop.
For less.js, explodes a set of selectors for a given rule.
/*
This assumes that the mixin is being included inside a selector.
Particularly useful for a set of selectors that have vendor-specific
prefixes, which cannot be mixed in a selector group.
Example usage:
@selectors: bar, baz, ~'::-webkit-input-placeholder', ~'::-moz-placeholder';;
.foo {
.explode-rule({
width: 100%;
}, @selectors);
}
Output:
.foo.bar {
width: 100%;
}
.foo.baz {
width: 100%;
}
.foo::-webkit-input-placeholder {
width: 100%;
}
.foo::-moz-placeholder {
width: 100%;
}
*/
.explode-rule(@rule, @selectorArray) {
.-(@i: length(@selectorArray)) when (@i > 0) {
@selector: extract(@selectorArray, @i);
&@{selector} { @rule(); }
.-((@i - 1));
} .-;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment