How to define a sass map for specific CSS selector - css

Question

I am trying to customize scss in my project so that I can use css variables according to css selector applied on outermost element.
The basic Idea I have is to define color variables and then use those color variables to define semantic color variables in two different css selectors.
$primary: orange;
$primary-dark: redorange;
$warn: red;
$accent: grey;
$dark-grey: #757678;
$light-grey: #f7f7f7;
$error-text: $warn;
.light {
$background: $light-grey;
$button-bg: $primary;
}
.dark {
$background: $dark-grey;
$button-bg: $primary-dark;
}
This is one solution I tried, but in scss we cannot change scope of variables according to selectors.
So I tried using functions.
$white: #fff;
$light-grey: #eaeaea
$primry-dark: redorange;
$primary: orange;
$black: #000;
$semantic-colors: (
background: (
screen: $white,
tile: $light-grey,
),
buttons: (
primary: $primary
link: $white
icons: $primary-dark;
)
);
#function semantic-color($semantic-color:'background', $tone: "base") {
// #return red;
#return map-get(map-get($semantic-colors, $semantic-color), $tone);
}
.side-nav-link {
background-color: semantic-color(background, tile);
}
The above code works fine. but I want to have a color map based on a theme. for eg:
dark has its own semantic color map and light has its own and I can access based on scope.
.light {
$semantic-colors: (
background: (
base: $white,
tile: $light-grey,
),
buttons: (
primary: $primary,
link: $white,
icons: $primary-dark;
)
);
}
.dark {
$semantic-colors: (
background: (
base: $black,
tile: $dark-grey,
),
buttons: (
primary: $primary-dark,
link: $black,
icons: $primary;
)
);
}
I can create two different maps within semantic-color map:
$semantic-colors: (
light:(
background: (
base: $white,
tile: $light-grey,
),
buttons: (
primary: $primary
link: $white
icons: $primary-dark;
)
),
dark:(
background: (
base: $black,
tile: $dark-grey,
),
buttons: (
primary: $primary-dark,
link: $black,
icons: $primary;
)
)
);
and then modify my function to get color within a specific map based on $theme variable.
For eg:
$theme: dark;
#function semantic-color($semantic-color:'background', $tone: "base") {
// #return red;
#return map-get(map-get(map-get($semantic-colors, $theme), $semantic-color), $tone);
}
but I don't know a way to define $theme according to .light and .dark selectors.
If I try doing something like this:
.light {
$theme: light;
}
.dark {
$theme: dark;
}
and then use the $theme variable in the semantic-color function then I get the error $theme is not defined.
so my question is
"Is there a way I can define $theme or semantic-color function or $sematic-color map according to a CSS selector (.light or .dark in my case)?"
I have read sass documentation but could not find any solution to suit my situation.
Articles I referred to:
Theming in SASS
Creating a Color Language in Web Interfaces (with Sass Maps)
educba SASS Map

Answer 1

I am not quits sure if I did it completly right ... but as I see your idea and code in general works well.
The only thing seems to be: there had been some errors in your code seeting up $semantic-colors !?
This (correctedt version = only corrections in $semantic-colors) works here:
//########### SASS: demo file
//### VARS
$primary: orange;
$primary-dark: redorange;
$warn: red;
$accent: grey;
$dark-grey: #757678;
$light-grey: #f7f7f7;
$white: #ffffff;
$black: #000000;
$error-text: $warn;
$semantic-colors: (
light: (
background: (
base: $white,
tile: $light-grey,
),
buttons: (
primary: $primary,
link: $white,
icons: $primary-dark,
),
),
dark: (
background: (
base: $black,
tile: $dark-grey,
),
buttons: (
primary: $primary-dark,
link: $black,
icons: $primary,
),
),
);
//### METHODS
$theme: dark;
#function semantic-color($semantic-color: "background", $tone: "base") {
// #return red;
#return map-get(
map-get(map-get($semantic-colors, $theme), $semantic-color),
$tone
);
}
//### STYLES
.light {
$theme: light;
background: semantic-color('background', 'base');
}
//###########################
//###### CSS: compiled file
.light {
background: #ffffff; // if $theme changes to dark this becomes #000000
}

Answer 2

Because of your comment I believe to understand your question better now. So, according to your last comment I add an additional answer as it is more an explanation about the general howto than a concrete answer to your code.
First: I believe your code (SASS-map/-function) works the right way
To me it seems more a question about understanding how the theme technique works.
So let's start from the base:
1. What you need to do for theming in html:
// set a theme anchor with classes
// --> class to body
<body class="theme_light">
... code ...
... all elements within body will be styled by theme-light-classes
// or ALTERNATIVE do it with a marker where your app starts in html
// --> class to app-root-element
<div class="app_root theme_light">
... code ...
... all elements within app-div will by styled by theme-light-classes
</div>
</body>
2. Based on HTML what you nee in CSS:
Write the styling for your elements for both(!) themes based on the used marker technique (body or app) ...
// write styling classes for both themes (dark + light)
// as child selector based on the html theme-anchor-classes
/* stylings light theme */
.theme_light .content {
background: #theme-light-background-color;
color: #theme-light-font-color;
}
.theme_light .button {
background: #theme-light-button-background-color;
color: #theme-light-button-font-color;
}
/* stylings dark theme */
.theme_dark .content {
background: #theme-dark-background-color;
color: #theme-dark-font-color;
}
.theme_dark .button {
background: #theme-dark-button-background-color;
color: #theme-dark-button-font-color;
}
// if you anchor with app class your css-selectors would have to be
/* light theme */
.app_root.theme_light .content { ... }
.app_root.theme_light .content { ... }
/* dark theme */
.app_root.theme_dark .content { ... }
.app_root.theme_dark .content { ... }
3. Use your SASS-function/-map to achieve this in SASS
In this step we use your (still working) function and map from your question. Writing the CSS in SASS is as easy with nesting the element classes ...
// write themes dark & white nested to the anchor classes
// use function & map from question
.theme_light {
// set sass theme varible
// to get from function values for theme light
$theme: light;
// write stylings
// function will automatic return values for light theme
body {
background: semantic-color('background', 'base');
color: semantic-color('text-color', 'base');
}
button {
background: semantic-color('buttons', 'primary');
color: semantic-color('buttons-text', 'primary');
}
}
.theme_dark {
// set sass theme varible
// to get from function values for theme dark
$theme: dark;
// write stylings
// function will automatic NOW return values for light theme
body {
background: semantic-color('background', 'base');
color: semantic-color('text-color', 'base');
}
button {
background: semantic-color('buttons', 'primary');
color: semantic-color('buttons-text', 'primary');
}
}
//###
//### --> that will compile the needed css!!!
//###
//### NOTE:
//--> if you use app-anchor-class
//--> your nesting would be as follow
.app_root.theme_light { ... same code as above ... }
.app_root.theme_dark { ... same code as above ... }
HINTS:
As you see your function is a powerful tool: as shown in the example it leads to write identical code twice. If you write a SASS mixin (use directive #content to pass individual theme styles to it) you can reduce it so you are able to write all themes at once.
As you see the SASS variable $theme is used IN SASS as switch which changes your function semantic-color() to get the right color (light or dark).
There are many approches to realize theme stylings in SASS. This is one of the traditional methods and having a good organized map a very intuitive one.