Skip to content

Instantly share code, notes, and snippets.

@davidkpiano
Last active August 29, 2015 14:16
Show Gist options
  • Save davidkpiano/c75e73a082b15e1738fc to your computer and use it in GitHub Desktop.
Save davidkpiano/c75e73a082b15e1738fc to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$__aggregate-map__: () !global;
@mixin aggregate($property, $value, $separator: comma) {
@if map-get($__aggregate-map__, &) == null {
$__aggregate-map__: map-merge($__aggregate-map__, (&: ())) !global;
}
$agg-selector-value: map-get($__aggregate-map__, &);
$agg-property-value: map-get($agg-selector-value, $property);
@if $agg-property-value == null {
$agg-property-value: ($value,);
} @else {
$agg-property-value: append($agg-property-value, $value, $separator);
}
$agg-selector-value: map-merge($agg-selector-value, ($property: $agg-property-value));
$__aggregate-map__: map-merge($__aggregate-map__, (&: $agg-selector-value)) !global;
}
@mixin \+($property, $value) {
@include aggregate($property, $value, comma);
}
@mixin \+_($property, $value) {
@include aggregate($property, $value, space);
}
@function \=($property) {
$selector-value: map-get($__aggregate-map__, &);
$property-value: null;
@if $selector-value {
$property-value: map-get($selector-value, $property);
@if length($property-value) == 1 {
$property-value: nth($property-value, 1);
}
}
$selector-value: map-remove($selector-value, $property);
$__aggregate-map__: map-merge($__aggregate-map__, (&: $selector-value)) !global;
@return inspect($property-value);
}
// Usage
// =====
@mixin my-mixin() {
@include \+(box-shadow, 0 10px 20px green);
@include \+(transition-property, width);
}
.my-class {
@include \+(box-shadow, inset 0 0 10px #555);
@include \+(box-shadow, 0 0 20px black);
@include \+(transition-property, height);
@include \+(transition-property, opacity);
@include my-mixin();
.child-animated-class {
@include \+(animation-name, foo);
@include \+(animation-name, bar);
animation-name: \=(animation-name);
}
box-shadow: \=(box-shadow);
transition-property: \=(transition-property);
}
.my-other-class {
@include \+_(transform, scale(2));
@include \+_(transform, rotate(15deg));
@include \+_(padding, 10px);
transform: \=(transform);
padding: \=(padding);
}
.my-class {
box-shadow: inset 0 0 10px #555, 0 0 20px black, 0 10px 20px green;
transition-property: height, opacity, width;
}
.my-class .child-animated-class {
animation-name: foo, bar;
}
.my-other-class {
transform: scale(2) rotate(15deg);
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment