Skip to content

Instantly share code, notes, and snippets.

@KittyGiraudel
Created April 14, 2014 07:51
Show Gist options
  • Save KittyGiraudel/10625439 to your computer and use it in GitHub Desktop.
Save KittyGiraudel/10625439 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// Overengineering mixin output
// By caching values and on-the-fly generating placeholders
// Clever and crazy. I like it so far.
// ---
// Map storing values when a mixin is being called
// Keys are dynamically added
// Values are dynamically updated
// Everything is dynamic. And cool.
$cache: ();
// A mixin caching values in a map
// And generating placeholders on the fly
// To avoid mixin repetitions
// ---
// @param [map] $declarations: map of properties/values to cache
// ---
@mixin cache($declarations) {
// Looping through all properties/values from map
@each $property, $value in $declarations {
// Get the stored values for the current property
$stored-values: map-get($cache, $property);
// If the value doesn't exist in stored values
@if $value != null and not index($stored-values, $value) {
// Add it
$cache: map-merge($cache, ($property: append($stored-values or (), $value))) !global;
// Refresh variable
$stored-values: map-get($cache, $property);
// And create a placeholder at root level
@at-root %#{$property}-#{length($stored-values)} {
#{$property}: $value;
}
}
// Extend the placeholder
// `!optional` is here as a security measure
// To avoid a crash if a placeholder hasn't been generated
@extend %#{$property}-#{index($stored-values, $value)} !optional;
}
}
// A mixin defining both the width and the height
// ---
// @param: [number] $width: width
// @param: [number] $height ($width): height
// ---
@mixin size($width, $height: $width) {
// Instead of regularly defining properties
// Move them to the cache mixin
// So they get cached and optimized
@include cache((
width: $width,
height: $height
));
}
// Demo
// ---
.element-a {
@include size(100%, 5em);
}
.element-b {
@include size(100%, 1px);
}
.element-c {
@include size(1px, 5em);
}
.element-d {
@include size(1px, 5em);
}
.element-a, .element-b {
width: 100%;
}
.element-a, .element-c, .element-d {
height: 5em;
}
.element-b {
height: 1px;
}
.element-c, .element-d {
width: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment