Skip to content

Instantly share code, notes, and snippets.

@lgmcolin
Created April 16, 2014 06:48
Show Gist options
  • Save lgmcolin/10819118 to your computer and use it in GitHub Desktop.
Save lgmcolin/10819118 to your computer and use it in GitHub Desktop.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// Map storing values when the mixin is being called
$cache: (
width : (),
height : (),
);
// A mixin defining both the width and the height
// ---
// The main problem with a regular "size" mixin is it doesn't try to
// merge selectors when there is either the width or the height
// repeated from one call to the other
// ---
// So here is an over-engineered version which use placeholders
// to group selectors when a width or height has already been used
// ---
// @param: [number] $width: width
// @param: [number] $height ($width): height
// ---
@mixin size($width, $height: $width) {
// If the width has not been cached yet
$stored-widths: map-get($cache, 'width');
@if not index($stored-widths, $width) {
// Cache the value
$cache: map-merge($cache, ('width': append($stored-widths, $width)));
// And create a placeholder at root
@at-root %width-#{length($stored-widths) + 1} {
width: $width;
}
}
// If the height has not been cached yet
$stored-heights: map-get($cache, 'height');
@if not index($stored-heights, $height) {
// Cache the value
$cache: map-merge($cache, ('height': append($stored-heights, $height)));
// And create a placeholder at root
@at-root %height-#{length($stored-heights) + 1} {
height: $height;
}
}
// Extend the placeholders
@extend %width-#{index(map-get($cache, 'width'), $width)};
@extend %height-#{index(map-get($cache, 'height'), $height)};
}
.a {
@include size(100%, 5em);
}
.b {
@include size(100%, 1px);
}
.c {
@include size(1px, 5em);
}
.d {
@include size(1px, 5em);
}
//编译结果
.a, .b {
width: 100%;
}
.a, .c, .d {
height: 5em;
}
.b {
height: 1px;
}
.c, .d {
width: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment