Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="theme-1">
<div class="side-nav">This is theme 1</div>
</div>
<div class="theme-2">
<div class="side-nav">This is theme 2</div>
</div>
// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----
/** context:
I wanted to set up a Sass map for my colour palette. I am nearly there, but
I want to set up validation so that if a non-existant palette or tone is specified in
the Sass files, the developer gets a warning
**/
/** issue:
As it stands, if I specify a non-existant palette e.g. theme-3 which doesn't exist, the
error in the terminal is "$map: null is not a map for `map-get'". However, if I specify
a non-existant tone e.g. 50pc which doesn't exist, there are no errors - the property
is just not printed in the compiled CSS.
**/
/** desired solution:
I would like error messages for both invalid palette and tone.
**/
$theme-color-1: #ff6600;
$theme-color-2: #000000;
@function color-palette($palette, $tone: 'base') {
@if (map-has-key($color-palette, $palette), $tone) {
@if $palette {
@return map-get(map-get($color-palette, $palette), $tone);
@if $tone {
@return map-get(map-get($color-palette, $palette), $tone);
} @else {
@warn "Unknown `#{$tone}` in $color-palette.";
@return null;
}
} @else {
@warn "Unknown `#{$palette}` in $color-palette.";
@return null;
}
}
}
$color-palette: (
theme-1: (
base: $theme-color-1,
10pc: rgba($theme-color-1, 0.1),
25pc: rgba($theme-color-1, 0.25)
),
theme-2: (
base: $theme-color-2,
10pc: rgba($theme-color-2, 0.1),
25pc: rgba($theme-color-2, 0.25)
),
);
.theme-1 {
.side-nav {
background-color: color-palette(theme-1, 10pc);
color: color-palette(theme-1, 25pc);
}
}
.theme-2 {
.side-nav {
background-color: color-palette(theme-2, 10pc);
color: color-palette(theme-2, 25pc);
}
}
/** context:
I wanted to set up a Sass map for my colour palette. I am nearly there, but
I want to set up validation so that if a non-existant palette or tone is specified in
the Sass files, the developer gets a warning
**/
/** issue:
As it stands, if I specify a non-existant palette e.g. theme-3 which doesn't exist, the
error in the terminal is "$map: null is not a map for `map-get'". However, if I specify
a non-existant tone e.g. 50pc which doesn't exist, there are no errors - the property
is just not printed in the compiled CSS.
**/
/** desired solution:
I would like error messages for both invalid palette and tone.
**/
.theme-1 .side-nav {
background-color: rgba(255, 102, 0, 0.1);
color: rgba(255, 102, 0, 0.25);
}
.theme-2 .side-nav {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.25);
}
<div class="theme-1">
<div class="side-nav">This is theme 1</div>
</div>
<div class="theme-2">
<div class="side-nav">This is theme 2</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.