Is any way to change scss file with color variables when class in body is changing?
I mean when I have in html:
<body class="custom"> ... </body>
I want to load in style.scss
#import 'custom';
and when I have
<body class="dark-mode"> ... </body>
I want to load in style.scss
#import 'dark-mode';
You can not make an #import depending on a condition, but there is a ton of possible other approaches to this. Here is a small framework I wrote back then.
#function keyFilter($iKey, $fKey, $rKey) {
#if ($iKey == $fKey) {
#return $rKey;
}
#return $iKey;
}
#function v($key) {
#return var(--#{$key});
}
//
$modes: (
"&": (
"color": #000,
),
"dark": (
"color": #fff,
),
);
//
#each $key, $map in $modes {
body#{keyFilter("[#{$key}]", "[&]", null)} {
#each $key, $value in $map {
--#{$key}: #{$value};
}
}
}
To "register" a new mode just nest another map in the $modes-map, you can add as many modes as you want. Keep in mind the "&"-mode represents the default-mode.
$modes: (
"&": (
//...
),
"dark": (
//...
),
//...
);
To register a new mode-depending variable just simply enter key and value to the respective mode.
$modes: (
"&": (
"color": #000,
"bgc": #fff,
"bgc-contrast": #eee,
//...
),
"dark": (
"color": #fff,
"bgc": #000,
"bgc-contrast": #424242,
//...
),
);
To call a variable just use the v($key) function.
body {
color: v(color);
background-color: v(bgc);
}
div.contrasted {
background-color: v(bgc-contrast);
}
This compiling to:
body {
--color: #000;
--bgc: #fff;
--bgc-contrast: #eee;
}
body[dark] {
--color: #fff;
--bgc: #000;
--bgc-contrast: #424242;
}
body {
color: var(--color);
background-color: var(--bgc);
}
div.contrasted {
background-color: var(--bgc-contrast);
}
Note: you do not need to declare each variable for each mode. If a variable wasn't found for the current mode, this won't throw an error.For Example: This...
$modes: (
"&": (
//...
),
"dark": (
"color": #fff,
"bgc": #000,
"bgc-contrast": #424242,
//...
),
);
//...
body {
color: v(color);
background-color: v(bgc);
}
div.contrasted {
background-color: v(bgc-contrast);
}
... is totally fine.
Related
I have an existing project with a scss file that uses semantic variables:
$background-color: white;
body {
background-color: $background-color;
}
I would like to change the background to black when I add a theming class to the body:
<body class="theme-dark">...</body>
and back to white if I remove the class (or switch to a theme-light).
I haven't found any light-weight methods to do this in scss (parametrizing a class for each theme seems like a very hard to maintain approach).
I've found a hybrid scss/css-custom properties solution:
original:
.theme-light {
--background-color: white;
}
update (based on Amar's answer):
:root {
--background-color: white;
}
.theme-dark {
--background-color: black;
}
$background-color: var(--background-color);
body {
background-color: $background-color;
}
Defining the scss variable as having a css-variable expansion as the value, i.e. (from above):
$background-color: var(--background-color);
generates the following css:
:root { --background-color: white; }
.theme-dark { --background-color: black; }
body { background-color: var(--background-color); }
which seems to be what we want...?
I like it since it only requires changing the definition of $background-color (not every usage in a very large scss file), but I'm unsure if this is a reasonable solution? I'm pretty new to scss, so maybe I've missed some feature..?
Doing this with SCSS is possible but you would have to add styles to all elements you want to theme. That is because SCSS is compiled at build-time and you can't toggle the variables with classes. An example would be:
$background-color-white: white;
$background-color-black: black;
body {
background-color: $background-color-white;
}
.something-else {
background-color: $background-color-white;
}
// Dark theme
body.theme-dark {
background-color: $background-color-black;
.something-else {
background-color: $background-color-black;
}
}
The best way to currently do it is by using CSS variables. You would define the default variables like this:
:root {
--background-color: white;
--text-color: black;
}
.theme-dark {
--background-color: black;
--text-color: white;
}
Then, you would use these variables in your elements like this:
body {
background-color: var(--background-color);
color: var(--text-color);
}
If the body element has the theme-dark class, it will use the variables defined for that class. Otherwise, it will use the default root variables.
All credit goes to Dmitry Borody
I would recommend an approach like what is mentioned in this Medium article. With this approach, you can assign what classes need to be themed without specifically mentioning the theme name so multiple themes can be applied at once.
First, you set up a SASS map containing your themes. The keys can be whatever makes sense to you, just make sure that each theme is using the same name for the same thing.
$themes: (
light: (
backgroundColor: #fff,
textColor: #408bbd,
buttonTextColor: #408bbd,
buttonTextTransform: none,
buttonTextHoverColor: #61b0e7,
buttonColor: #fff,
buttonBorder: 2px solid #fff,
),
dark: (
backgroundColor: #222,
textColor: #ddd,
buttonTextColor: #aaa,
buttonTextTransform: uppercase,
buttonTextHoverColor: #ddd,
buttonColor: #333,
buttonBorder: 1px solid #aaa,
),
);
Then use the mixin and function pair to add theme support.
body {
background-color: white;
#include themify {
background-color: theme( 'backgroundColor' );
}
}
.button {
background-color: lightgray;
color: black;
#include themify {
background-color: theme( 'buttonBackgrounColor' );
color: theme( 'buttonTextColor' );
}
&:focus,
&:hover {
background-color: gray;
#include themify {
background-color: theme( 'buttonBackgroundHoverColor' );
color: theme( 'buttonTextHoverColor' );
}
}
}
If you're going to be adding a lot of themes or a theme will be touching a lot of stuff, you might want to set up your SCSS files a little differently so that all the theming doesn't bloat your main CSS file (like the example above would do). One way to do this might be to create a themes.scss file and replicate any selector paths that need theming and have a second build script that outputs just the themes.scss file.
The Mixin
#mixin themify( $themes: $themes ) {
#each $theme, $map in $themes {
.theme-#{$theme} & {
$theme-map: () !global;
#each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
#content;
$theme-map: null !global;
}
}
}
The Function
#function themed( $key ) {
#return map-get( $theme-map, $key );
}
I have a nicely working SCSS function with which I can call any color like so:
color: clr(milk);
Now I would like to make some kind of loop within the map-merge so that when, for example I add a new nested map called 'tertiary' with some other colors, the colors automatically become available without having to add
map-get(colors, 'tertiary')
to the map-merge. Does anyone know how to do this? Below is my current function:
$colors: (
primary: (
milk: #fff,
cola: #000,
mine-shaft: #232323,
),
secondary: (
pampas: #f4f1ef,
pearl-brush: #e9e2dd,
alto: #ddd,
),
);
// Color generation
#function clr($color) {
$color: map-get(map-merge(map-get($colors, 'primary'), map-get($colors, 'secondary')), $color);
#return $color;
}
Nice project! map-merge() can be indeed used to achieve what you want, however it adds an unnecessary step. I'd recommend to simply use a nested loop coupled with an #if statement.
#function clr($find) {
#each $colorCategoryName, $colorCategory in $colors {
#each $colorName, $color in $colorCategory {
#if $find == $colorName {
#return $color;
}
}
}
}
For example: This...
$colors: (
"primary": (
"milk": #fff,
"cola": #000,
"mine-shaft": #232323,
),
"secondary": (
"pampas": #f4f1ef,
"pearl-brush": #e9e2dd,
"alto": #ddd,
),
);
#function clr($find) {
#each $colorCategoryName, $colorCategory in $colors {
#each $colorName, $color in $colorCategory {
#if $find == $colorName {
#return $color;
}
}
}
}
body {
color: clr(cola);
background-color: clr(pampas);
}
Will output:
body {
color: #000;
background-color: #f4f1ef;
}
Let me know if this isn't what you were looking for!
I wanted to use a Scss solution to easily modify styles on a website with multiple branded sub sites. My aim was to get arrays for elements (classes, ids, tags) which share styling properties and just have those arrays to be edited when adjusting brand styles.
I came up with the following solution which works fine, however... Couldn't the following be done in a smarter way? i.e. less chunks of "$array... + $all.. + #each"? Hope you know what I mean when you see my current syntax:
// All elements with background colors
$arrayElementsWithBackgroundColor: (
'.example-1',
'.example-2' // etc.
);
$allElementsWithBackgroundColor: ();
#each $item in $arrayElementsWithBackgroundColor {
$allElementsWithBackgroundColor: append($allElementsWithBackgroundColor, unquote('#{$item}'), 'comma');
};
// All elements with background gradients
$arrayElementsWithBackgroundColorGradient: (
'.example-3',
'.example-4' // etc.
);
$allElementsWithBackgroundColorGradient: ();
#each $item in $arrayElementsWithBackgroundColorGradient {
$allElementsWithBackgroundColorGradient: append($allElementsWithBackgroundColorGradient, unquote('#{$item}'), 'comma');
};
// All elements with semi-transparent background colors
$arrayElementsWithBackgroundColorSemiTransparent: (
'.example-5',
'.example-6' // etc.
);
$allElementsWithBackgroundColorSemiTransparent: ();
#each $item in $arrayElementsWithBackgroundColorSemiTransparent {
$allElementsWithBackgroundColorSemiTransparent: append($allElementsWithBackgroundColorSemiTransparent, unquote('#{$item}'), 'comma');
};
// All elements with border colors
$arrayElementsWithBorderColor: (
'.example-7',
'.example-8' // etc.
);
$allElementsWithBorderColor: ();
#each $item in $arrayElementsWithBorderColor {
$allElementsWithBorderColor: append($allElementsWithBorderColor, unquote('#{$item}'), 'comma');
};
// All elements with text colors
$arrayElementsWithTextColor: (
'.example-9',
'.example-10' // etc.
);
$allElementsWithTextColor: ();
#each $item in $arrayElementsWithTextColor {
$allElementsWithTextColor: append($allElementsWithTextColor, unquote('#{$item}'), 'comma');
};
Those chunks are where I collect my arrays of elements to be branded. Afterwards I'm using those like this:
body {
#at-root #{&}.brand-1 {
#{$allElementsWithBackgroundColor} { background: $brand-1; }
#{$allElementsWithBackgroundColorGradient} { background: $brand-1-gradient; }
#{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($brand-1,0.8); }
#{$allElementsWithBorderColor} { border-color: $brand-1; }
#{$allElementsWithTextColor} { color: $brand-1; }
}
#at-root #{&}.brand-2 {
#{$allElementsWithBackgroundColor} { background: $$brand-2; }
#{$allElementsWithBackgroundColorGradient} { background: $$brand-2-gradient; }
#{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($$brand-2,0.8); }
#{$allElementsWithBorderColor} { border-color: $$brand-2; }
#{$allElementsWithTextColor} { color: $$brand-2; }
}
#at-root #{&}.brand-3 {
#{$allElementsWithBackgroundColor} { background: $brand-3; }
#{$allElementsWithBackgroundColorGradient} { background: $brand-3-gradient; }
#{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($brand-3,0.8); }
#{$allElementsWithBorderColor} { border-color: $brand-3; }
#{$allElementsWithTextColor} { color: $brand-3; }
}
#at-root #{&}.brand-4 {
#{$allElementsWithBackgroundColor} { background: $brand-4; }
#{$allElementsWithBackgroundColorGradient} { background: $brand-4-gradient; }
#{$allElementsWithBackgroundColorSemiTransparent} { background: rgba($brand-4-alt,0.8); }
#{$allElementsWithBorderColor} { border-color: $brand-4; }
#{$allElementsWithTextColor} { color: $brand-4; }
}
}
You could consider using maps – like:
// _brands.scss
$brand-1: red;
$brand-2: green;
$brand-3: orange;
$brand-4: blue;
$brand-1-gradient: linear-gradient(to top, red, red);
$brand-2-gradient: linear-gradient(to top, green, green);
$brand-3-gradient: linear-gradient(to top, orange, orange);
$brand-4-gradient: linear-gradient(to top, blue, blue);
$brands: (
brand-1 : (
// note! you can add more properties to each style map
'.example-1, .example-2': (background: $brand-1, color: magenta ),
'.example-3, .example-4': (background: $brand-1-gradient ),
'.example-5, .example-6': (background: rgba($brand-1, 0.8) ),
'.example-7, .example-8': (border-color: $brand-1 ),
'.example-9, .example-10': (color: $brand-1 )
),
brand-2 : (
'.example-1, .example-2': (background: $brand-2 ),
'.example-3, .example-4': (background: $brand-2-gradient ),
'.example-5, .example-6': (background: rgba($brand-2, 0.8) ),
'.example-7, .example-8': (border-color: $brand-2 ),
'.example-9, .example-10': (color: $brand-2 )
),
brand-3 : (
'.example-1, .example-2': (background: $brand-3 ),
'.example-3, .example-4': (background: $brand-4-gradient ),
'.example-5, .example-6': (background: rgba($brand-3, 0.8) ),
'.example-7, .example-8': (border-color: $brand-3 ),
'.example-9, .example-10': (color: $brand-3 )
),
brand-4 : (
'.example-1, .example-2': (background: $brand-4 ),
'.example-3, .example-4': (background: $brand-4-gradient ),
'.example-5, .example-6': (background: rgba($brand-4, 0.8) ),
'.example-7, .example-8': (border-color: $brand-4 ),
'.example-9, .example-10': (color: $brand-4 )
)
);
// brands.scss
#import '_brands.scss'
body {
#each $brand, $selectors in $brands {
#at-root #{&}.#{$brand} {
#each $selector, $style in $selectors {
#{$selector}{
#each $property, $value in $style {
#{$property}: $value;
}
}
}
}
}
}
You could also chose to split each brand into individual stylesheets using a mixin
// add to _brand.scss
#mixin brand($brand-name) {
body {
#at-root #{&}.#{$brand-name} {
#each $selector, $style in map-get($brands, $brand-name) {
#{$selector}{
#each $property, $value in $style {
#{$property}: $value;
}
}
}
}
}
}
// brand1.scss
#import '_brands.scss';
#include brand(brand-1);
// brand2.scss
#import '_brands.scss';
#include brand(brand-2);
// brand3.scss
#import '_brands.scss';
#include brand(brand-3);
// brand4.scss
#import '_brands.scss';
#include brand(brand-4);
I need to create dynamic classes for which I am creating a scss code to create the classes for all the possible values. Below is my code:-
$colors: (
"black": "0,0,0",
"white": "255,255,255",
"red" : "255,0,0"
);
$opacity:9;
#for $i from 0 through $opacity {
$j:$i/10;
#each $color, $rgb in $colors {
$rgba: "#{$rgb},#{$j}";
.background-#{$color}-#{$i} {
background: #{$rgba};
}
}
}
I want it to give out put as :-
.background-black-0 {
background: rgba(0,0,0,0);
}
.background-white-0 {
background: rgba(255,255,255,0);
}
.background-red-0 {
background: rgba(255,0,0,0);
}
.background-black-1 {
background: rgba(0,0,0,0.1);
}
.background-white-1 {
background: rgba(255,255,255,0.1);
}
.background-red-1 {
background: rgba(255,0,0,0.1);
}
struggling with the interpolation for rgba(). Otherwise its getting the exact values I want. If you check my code in https://www.sassmeister.com/ you will see it.
You could use directly your colors as rgb color in your map and then add opacity in your #for loop:
$colors: (
"black": rgb(0,0,0),
"white": rgb(255,255,255),
"red": rgb(255,0,0)
);
$opacity:9;
#for $i from 0 through $opacity {
$j:$i/10;
#each $color, $rgb in $colors {
.background-#{$color}-#{$i} {
background: rgba($rgb, $j);
}
}
}
I'm trying to loop with a loop, the first loop is a list and the second is a sass map. The items in the list represent sass maps. The issue is, in the second loop, an error is thrown if I simply add $ in front of #{$event_type}. Should I be approaching this differently?
The list:
$event_list: 'summit', 'awards', 'awards-europe', 'other';
Example map:
$awards: (
content-marketing: #F47521,
digiday: #FFDD00,
publishing: #89C63F,
signal: #33AADB,
video: $pink
);
Broken Loop:
#each $event_type in $event_list {
#each $event, $color in #{$event_type} {
&.#{$event_type}-#{$event} {
section h2, h3 {
color: #{$color};
border-color: #{$color};
}
// More CSS
}
}
}
It may be better to use a multi-map structure:
$event_list: (
'summit': (
key1: #000,
key2: #fff
),
'awards': (
content-marketing: #F47521,
digiday: #FFDD00,
publishing: #89C63F,
signal: #33AADB,
video: $pink
)
);
The loop will be about the same:
// Note the added $map variable.
#each $event_type, $map in $event_list {
#each $event, $color in $map {
&.#{$event_type}-#{$event} {
section h2, h3 {
color: #{$color};
border-color: #{$color};
}
// More CSS
}
}
}
SassMeister Demo