Skip to content

Instantly share code, notes, and snippets.

@anatomic
Last active August 29, 2015 14:23
Show Gist options
  • Save anatomic/519caa0c8e8316a726b0 to your computer and use it in GitHub Desktop.
Save anatomic/519caa0c8e8316a726b0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
// Our project defines some themes
$themes: (
foo: (
foreground: #5b5b5b,
background: #f3f3f3
)
);
// Our library also defines some themes
$libraryThemes: (
foo: (
foreground: #ccc,
background: #3b3b3b
),
bar: (
foreground: #ccc,
background: #3b3b3b
),
);
// Our library checks to see if there any priority themes to use
@if (variable-exists(themes)) {
// if some exist, merge with the library giving the project themes priority
$themes: map-merge($libraryThemes, $themes);
} @else {
// if there aren't, just use the library themes
$themes: $libraryThemes;
}
@function get-theme($name) {
@return map-get($themes, $name);
}
@function add-theme($theme, $name) {
@return map-merge($themes, ( $name : $theme));
}
@function requires($theme, $props) {
@each $key in $props {
@if (not map-has-key($theme, $key)) {
@warn "To use this theme requires #{$key} to be set in the map";
@return false;
}
}
@return true;
}
.debug{
themes: inspect($themes);
valid: requires(get-theme(foo), foreground background);
valid: requires(get-theme(foo), foreground background border);
}
@if (requires(get-theme(foo), foreground background)) {
/* Include mixin here, we know that all requirements are satisfied */
} @else {
/* Don't include mixin as we know that a required property is missing */
}
@if (requires(get-theme(foo), foreground background border)) {
/* Include mixin here, we know that all requirements are satisfied */
} @else {
/* Don't include mixin as we know that a required property is missing */
}
$themes: add-theme((
foreground: blue,
background: white
), baz);
/*
Now our $themes looks like this:
#{inspect($themes)}
*/
.debug {
themes: (foo: (foreground: #5b5b5b, background: #f3f3f3), bar: (foreground: #ccc, background: #3b3b3b));
valid: true;
valid: false;
}
/* Include mixin here, we know that all requirements are satisfied */
/* Don't include mixin as we know that a required property is missing */
/*
Now our $themes looks like this:
(foo: (foreground: #5b5b5b, background: #f3f3f3), bar: (foreground: #ccc, background: #3b3b3b), baz: (foreground: blue, background: white))
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment