Skip to content

Instantly share code, notes, and snippets.

@mootari
Created October 9, 2014 11:24
Show Gist options
  • Save mootari/b31fac13d909549587af to your computer and use it in GitHub Desktop.
Save mootari/b31fac13d909549587af to your computer and use it in GitHub Desktop.
Demonstration of using maps as map keys. #sassmeister
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.4.0)
// ----
@import "breakpoint";
@import "singularitygs";
// Placeholder registry required by layout-column().
$layout--placeholders: ();
@mixin layout-column($size, $breakpoint, $gutter: false, $grid: null) {
// Used as map key, to uniquely identify a placeholder.
$config: (
size: $size,
breakpoint: $breakpoint,
gutter: $gutter,
grid: $grid
);
// Generate some debug output.
debug: "Call to layout-column()";
$placeholder: map-get($layout--placeholders, $config);
@if $placeholder == null {
$placeholder: "%#{unique-id()}";
// Declare the new placeholder.
@at-root #{$placeholder} {
@include breakpoint($breakpoint) {
@include grid-span($size);
// Generate some debug output.
debug: "Generated placeholder: #{$placeholder}";
}
}
// Add the generated placeholder, keyed by the config map.
$layout--placeholders: map-merge($layout--placeholders, ($config: $placeholder));
}
@extend #{$placeholder};
}
body {
@include layout-column(6, 1600px);
@include layout-column(6, 1600px);
@include layout-column(12, 1200px);
}
body {
debug: "Call to layout-column()";
debug: "Call to layout-column()";
debug: "Call to layout-column()";
}
@media (min-width: 1600px) {
body {
width: 49.15254%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
debug: "Generated placeholder: %uxybuqqgt";
}
}
@media (min-width: 1200px) {
body {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
debug: "Generated placeholder: %uxybuqqh1";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment