sass variables right way - variables

Question

I'm creating multiple themes with scss in ionic. I ended up with 2 ways, but which one is better and why?
First way
$colors: (
primary: #bdc3c7,
secondary: #444444,
danger: #7f8c8d,
light: #34495e,
dark: #e74c3c
);
.light-theme {
// main style for all the commi themes app
ion-content {
background-color: color($colors, light);
}
#import "main";
}// light-theme
second way
.light-theme {
$colors: (
primary: #bdc3c7,
secondary: #444444,
danger: #7f8c8d,
light: #34495e,
dark: #e74c3c
);
// main style for all the commi themes app
ion-content {
background-color: color($colors, light);
}
#import "main";
}//
The first way I have the colors outside the class and the second way the colors are inside the class and the both ways are working. I'm thinking about what would happen if we have at least three themes?

Answer 1

Just fantasy. Sassmeister demo.
Let's define an array of themes:
$themes: (
default: ( // theme name
// some colors. colors names are the same for all themes
primary: red,
secondary: blue
),
dark: (
primary: red-dark,
secondary: blue-dark
),
light: (
primary: red-light,
secondary: blue-light
)
);
Then set the $theme variable. It refers to one of the elements of $themes array. We will always get color values form this variable.
$theme: map-get($themes, default);
Boring mixin to get color value by name. $theme used here.
#function color($color-name) {
#return map-get($theme, $color-name);
}
Mixin stylish that redefines the value of $theme variable. We use !global flag to make this variable accessible from any scope. This mixin generates class name .theme-name before our selector for all themes but not default.
#mixin stylish($theme-name: 'default') {
$theme: map-get($themes, $theme-name) !global;
#if ($theme-name == 'default') {
#content;
} #else {
.theme-#{$theme-name} & {
#content;
}
}
}
And now we can write code like this:
.block {
#include stylish() {
color: color(primary);
}
&__element {
#include stylish() {
color: color(primary);
}
#include stylish(dark) {
color: color(primary);
}
#include stylish(light) {
color: color(primary);
}
}
}
Css output:
.block {
color: red;
}
.block__element {
color: red;
}
.theme-dark .block__element {
color: red-dark;
}
.theme-light .block__element {
color: red-light;
}
This mixin can generate all themes. Demo.
#mixin global-stylish() {
#include stylish() {
#content;
}
#include stylish(dark) {
#content;
}
#include stylish(light) {
#content;
}
}
Usage:
&__element {
#include global-stylish() {
color: color(secondary);
}
}

Answer 2

Thank you for opening sass way , here is my end code
$themes:(
theme:(
primary: #032838,
secondary: #868a6f,
danger: #ed4039,
light: #f3f2f2,
dark: #37aad9
),
light:(
primary: #34495e,
secondary: #e74c3c,
danger: #7f8c8d,
light: #bdc3c7,
dark: #444444
),
dark:(
primary: #f3f2f2,
secondary: #3D8EB9,
danger: #e74c3c,
light: #303030,
dark: #212121
),
main:(
black: #000000,
white: #ffffff,
wisteria: #8e44ad,
pomegranate:#c0392b,
orange: #f39c12,
green: #03A678,
)
);
$color-key: primary !default;
#function color(
$theme-name: commi,
$color-key: $color-key,
$opacity: 1
){
$color: null;
$theme: map-get($themes, $theme-name);
#if $theme{
$color: map-get($theme, $color-key );
}
#return $color;
}
#import "light";
#import "dark";
and in my theme i call it like this
.dark-theme{
$theme : dark;
#import "main";
}
in scss style file
ion-content {
color: color($theme, light);
background-color:color($theme, light);
#if($theme == 'dark'){
background-color:color($theme, primary);
}
}